thisiszoaib

<mat-chip-list selectable multiple>
    <mat-chip #c="matChip" *ngFor="let option of options" [value]="option" (click)="toggleSelection(c)">
        {{option}}
    </mat-chip>
</mat-chip-list>

thisiszoaib

<mat-chip-list>
    <mat-chip *ngFor="let option of options" [value]="option">
        {{option}}
    </mat-chip>
</mat-chip-list>

thisiszoaib

<a mat-tab-link *ngFor="let tabItem of tabs" 
     [routerLink]="tabItem.route" 
     routerLinkActive 
     #rla="routerLinkActive"
     [active]="rla.isActive">
...
</a>

thisiszoaib

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

thisiszoaib

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

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

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

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,