thisiszoaib

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

thisiszoaib

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

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

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

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

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

checkForCardMatch(): void {
    setTimeout(() => {
      
      const cardOne = this.flippedCards[0];
      const cardTwo = this.flippedCards[1];
      const nextState = cardOne.imageId === cardTwo.imageId ? 'matched' : 'default';
      cardOne.state = cardTwo.state = nextState;
      
      this.flippedCards = [];
      

thisiszoaib

<mat-toolbar color="primary">
  Material Tabs with Lazy Loaded Routes
</mat-toolbar>

<nav mat-tab-nav-bar>
  <a mat-tab-link *ngFor="let tabItem of tabs">
    <mat-icon class="mr-8">{{tabItem.icon}}</mat-icon>
    {{tabItem.label}}
  </a>
</nav>

thisiszoaib

@NgModule({
  declarations: [SectionOneComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(
      [{ path: '', component: SectionOneComponent }]
    ),
    MatCardModule,
    MatButtonModule,
  ],

thisiszoaib

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'one',
  },
  {
    path: 'one',
    loadChildren: () =>
      import('./section-one/section-one.module').then(