Как связать данные между двумя компонентами данных?

Question

Я использую Angular Material для создания селектора изображения, используя <mat-button-toggle> и mat-badge. <mat-button-toggle> содержит изображение, которое может выбрать пользователь, и mat-badge будет перекрывать зеленую галочку, когда <mat-button-toggle> находится в состоянии selected. Когда изображение отменяется, зеленая галочка скрывается / удаляется с изображения.

Как привязать данные mat-badge matBadgeHidden к <mat-button-toggle> selected свойству? Другими словами, как мне заставить это работать matBadgeHidden="!selected"

Исходный код

<mat-button-toggle-group 
  #group="matButtonToggleGroup" 
  multiple=true>
  <mat-button-toggle 
    *ngFor="let image of images" 
    value="image.id"  
    matBadge="✔️" 
    matBadgePosition="above after" 
    matBadgeHidden="!selected" 
    matBadgeColor="basic" 
    style="padding-top:10px; padding-bottom:10px; margin:10px">
      <img src="{{image.url}}" />
  </mat-button-toggle>
</mat-button-toggle-group>

Ссылки на документы API:

1. Кнопка переключения
2. Badget

Answer 1

Свяжите свойство matBadgeHidden со свойством mat-button-toggle checked.

<mat-button-toggle 
    #imageButton
    *ngFor="let image of images"  
    matBadge="✔️" 
    [matBadgeHidden]="!imageButton.checked">
</mat-button-toggle>

https://stackblitz.com/edit/angular-mfmpx5