Angular 6 клик по иконкам
 

Добрый день. Подскажите, пожалуйста:
проект на ангулар - материал

<mat-card style="display: flex;" *ngFor="let item of list">
    <div (click)="check = !check">
      <mat-icon [innerText]="check ? 'favorite_border' : 'favorite'"></mat-icon>
    </div>
    <p style="margin: 0"> {{item.question}} </p>
  </mat-card>

при клике на одну иконку меняются все, а нужно для каждого mat-card отдельно.
Что я делаю не так?

Делал и через функцию:

<mat-card style="display: flex;" *ngFor="let item of list">
    <mat-icon (click) = "changeIcon('favorite_border')">{{iconName}}</mat-icon>
    <p style="margin: 0"> {{item.question}} </p>
  </mat-card>

iconName = 'favorite';
  
  changeIcon(newIcon:string) :void {
    this.iconName = newIcon;
   }

но то же самое. меняются все иконки

AlexTrust,
Переменная check определена в компоненте и применятся ко всем <mat-card>. Соответственно при клике на одну из иконок происходит изменение общей переменной check. Чтобы этого избежать, можно хранить состояние check не на уровне компонента, а на уровне модели item, которая используется для отображения mat-card.

<mat-card style="display: flex;" *ngFor="let item of list">
    <div (click)="item.check = !item.check">
      <mat-icon [innerText]="item.check ? 'favorite_border' : 'favorite'"></mat-icon>
    </div>
    <p style="margin: 0"> {{item.question}} </p>
  </mat-card>

destus,
Спасибо огромное.
Могу я у Вас уточнить еще один момент по поводу передачи объекта из одного компонента в другой?

AlexTrust,
Вы можете задавать вопросы на форуме, он же для этого и существует. Если кто-то из участников будет знать ответ на вопрос - подскажет.