String interpolation vs property binding

Property Binding is used when you have to set an element property to a non-string data value.

@Component({
  imports: [CommonModule, MatCardModule, MatButtonModule]
})
export class CardComponent {
  isLikeDisabled: boolean = false;
  isShareDisabled: boolean = true;
}

Here if you use string interpolation isLikeDisabled value will resulted to string like ‘true’ or ‘false’ rather than the boolean true or false value.

Basically the idea is if you want to just display in the view use string interpolation and if you want to use value for dynamic type binding use property binding.

<mat-card>
...
  <mat-card-actions>
    <button mat-button [disabled]="isLikeDisabled">LIKE</button>
    <button mat-button [disabled]="isShareDisabled">SHARE</button>
  </mat-card-actions>
...
</mat-card>