thisiszoaib

cardClicked(index: number): void {
    const cardInfo = this.cards[index];
    
    if (cardInfo.state === 'default' && this.flippedCards.length < 2)      
    {
      cardInfo.state = 'flipped';
      this.flippedCards.push(cardInfo);
      
      if (this.flippedCards.length === 2) {
        this.checkForCardMatch();

thisiszoaib

<mat-toolbar color="primary" class="text-center">
  Card Memory Game
</mat-toolbar>

<div class="p-16">
  <p class="text-center">Tap on a card to flip it. You can only flip a maximum of two cards at a time. A match will
    remove
    those cards!</p>
  <div class="grid p-16">
    <app-game-card *ngFor="let c of cards; let idx=index" [data]="c" (cardClicked)="cardClicked(idx)">

thisiszoaib

ngOnInit(): void {
    this.setupCards();
  }
  
setupCards(): void {
    this.cards = [];
    
    this.cardImages.forEach((image) => {
      const cardData: CardData = {
        imageId: image,

thisiszoaib

<div class="card" (click)="cardClicked.emit()" [@cardFlip]="data.state">
    <div class="face back">
        <img src="assets/card-back.jpg">
    </div>
    <div class="face front">
        <img [src]="'https://source.unsplash.com/' + data.imageId + '/200x300'">
    </div>
</div>

thisiszoaib

export class GameCardComponent implements OnInit {
  
  @Input() data: CardData;
  
  @Output() cardClicked = new EventEmitter();
  
  constructor() { }
  
  ngOnInit(): void {
  }

thisiszoaib

export class GameCardComponent implements OnInit {
  
  data: CardData = {
    imageId: "pDGNBK9A0sk",
    state: "default"
  };
  
  cardClicked() {
    if (this.data.state === "default") {
      this.data.state = "flipped";

thisiszoaib

@Component({
  selector: 'app-game-card',
  templateUrl: './game-card.component.html',
  styleUrls: ['./game-card.component.scss'],
  animations: [
    trigger('cardFlip', [
      state('default', style({
        transform: 'none'
      })),
      state('flipped', style({

thisiszoaib

:host {
    display: block;
    perspective: 600px;
}

.card {
    box-shadow: 10px 10px 43px -18px rgba(0, 0, 0, 0.75);
    border-radius: 5px;
    height: 300px;
    width: 200px;

thisiszoaib

<div class="card" (click)="cardClicked()">
    <div class="back">
        <img src="assets/card-back.jpg">
    </div>
    <div class="front">
        <img [src]="'https://source.unsplash.com/' + data.imageId + '/200x300'">
    </div>
</div>

thisiszoaib

export class PdfService {
  
  pdfMake: any;
  
  constructor() { }
  
  async loadPdfMaker() {
    if (!this.pdfMake) {
      const pdfMakeModule = await import('pdfmake/build/pdfmake');
      const pdfFontsModule = await import('pdfmake/build/vfs_fonts');