Skip to content

Task - Display like count using string interpolation

Bind logic to increment like on click event. Also display like count on view.

Solution

export class CardComponent {
  ...
  likeCount: number = 0;

  onLike(): void {
    this.likeCount++;
    alert('You liked Shiba!')
  }
  ...
}

<mat-card>
  <mat-card-header>
    ...
    <mat-card-subtitle>{{likeCount}} Likes</mat-card-subtitle>
  </mat-card-header>
 ...
  <mat-card-actions>
    <button mat-button [disabled]="isLikeDisabled" (click)="onLike()">LIKE</button>
    ...
  </mat-card-actions>
</mat-card>