Event binding

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Event binding syntax: (click)="onClick()"

The syntax consists of a target event name (here it’s click) within parentheses to the left of an equal sign, and a quoted template statement to the right.

Template statements are methods or properties that you can use in your HTML to respond to user events.

export class CardComponent {
  ...
  onLike(): void {
    alert('You liked Shiba!')
  }
  ...
}

<mat-card>
 ...
  <mat-card-actions>
    <button mat-button [disabled]="isLikeDisabled" (click)="onLike()">LIKE</button>
    ...
  </mat-card-actions>
</mat-card>