Skip to content
Angular Essentials
GitHub

Property binding

To bind to an element’s property, enclose it in square brackets, [], which identifies the property as a target property.

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.

export class CardComponent {

  imageUrl: string = 'https://material.angular.io/assets/img/examples/shiba2.jpg';
}
<mat-card>
  ...
  <img [src]="imageUrl" alt="shiba">
  ...
</mat-card>