Coin Flipping App Using Angular

Last Updated : 23 Jul, 2025

We will be developing a Coin Flipping Application using the Angular framework. This interactive app will allow users to flip a coin with realistic animation and display the result of the flip. We will focus on creating a smooth and visually appealing experience by incorporating Angular's component-based architecture and CSS animations.

Project Preview

Screenshot-2024-08-10-at-00-02-36-CoinFlipApp
Project Preview

Prerequisites

Approach

  • Use CSS animations to visually represent the coin flipping motion.
  • Randomly select between heads and tails images after the flip.
  • Disable the button and show the result only after the animation completes.
  • Show the outcome of the flip (heads or tails) once the animation ends.

Steps to Create Coin Flipping App using Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new coinFlipApp --no-standalone
cd coinFlipApp

Step 3: Create Standalone Component

Create a standalone component. You can generate a standalone component using the Angular CLI:

ng generate component coin-flip

Dependencies

"dependencies": {
    "@angular/animations": "^18.1.4",
    "@angular/common": "^18.1.4",
    "@angular/compiler": "^18.1.4",
    "@angular/core": "^18.1.4",
    "@angular/forms": "^18.1.4",
    "@angular/platform-browser": "^18.1.4",
    "@angular/platform-browser-dynamic": "^18.1.4",
    "@angular/router": "^18.1.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
}

Project Structure

PS
Folder Structure

Example: Create the required files as seen in the folder structure and add the following codes.

HTML 
<!--app.component.html-->
<app-coin-flip></app-coin-flip>
HTML 
<!--coin-flip.component.html-->

<div class="coin-container">
    <h1>GeeksforGeeks</h1>
    <h3>Coin flipping app using Angular</h3>
    <div class="coin" [ngClass]="{'flipping': isFlipping}">
        <img [src]="coinImage" alt="Coin" />
    </div>
    <button (click)="flipCoin()" [disabled]="isFlipping">Flip Coin</button>
    <div *ngIf="result && !isFlipping">
        <h2>The result is: {{ result }}</h2>
    </div>
</div>
CSS 
/*/// coin-flip.component.css*/

.coin-container {
    text-align: center;
    margin-top: 50px;
}

.coin {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    transition: transform 3s;
}

.coin img {
    width: 100%;
    height: 100%;
}

.coin.flipping {
    animation: flip 3s;
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(3600deg);
    }
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

h2 {
    margin-top: 20px;
    font-size: 24px;
}

h1 {
    color: green;
    font-size: 36px;
    margin-top: 30px;
}

h3 {
    font-size: 24px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .coin {
        width: 80px;
        height: 80px;
    }

    button {
        font-size: 14px;
        padding: 8px 16px;
    }

    h2 {
        font-size: 20px;
    }

    h1,
    h3 {
        font-size: 20px;
    }
}
JavaScript 
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoinFlipComponent } from './coin-flip/coin-flip.component';

@NgModule({
    declarations: [
        AppComponent,
        CoinFlipComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
JavaScript 
/// coin-flip.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-coin-flip',
    templateUrl: './coin-flip.component.html',
    styleUrls: ['./coin-flip.component.css']
})
export class CoinFlipComponent {
    isFlipping = false;
    result: string | null = null;
coinImage ='https://media.geeksforgeeks.org/wp-content/uploads/20231016151817/heads.png';
    private flipDuration = 3000;

    flipCoin() {
        if (this.isFlipping) return;

        this.isFlipping = true;
        this.result = null;
        this.coinImage = 
'https://media.geeksforgeeks.org/wp-content/uploads/20231016151817/heads.png';

        setTimeout(() => {
            const isHeads = Math.random() < 0.5;
            this.coinImage = isHeads
        ? 'https://media.geeksforgeeks.org/wp-content/uploads/20231016151817/heads.png'
        : 'https://media.geeksforgeeks.org/wp-content/uploads/20231016151806/tails.png';
            this.result = isHeads ? 'Heads' : 'Tails';
            this.isFlipping = false;
        }, this.flipDuration);
    }
}
JavaScript 
/// coin-flip.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CoinFlipComponent } from './coin-flip.component';

describe('CoinFlipComponent', () => {
    let component: CoinFlipComponent;
    let fixture: ComponentFixture<CoinFlipComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [CoinFlipComponent]
        });
        fixture = TestBed.createComponent(CoinFlipComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Steps to Run the Application

Open the terminal, run this command from your root directory to start the application

ng serve --open

Open your browser and navigate to http://localhost:4200

Output

Comment

Explore