Чтобы изменить несколько значков, нажмите на угловой 6

Question

Я использую простой <mat-icon>highlight_off</mat-icon>. Я хочу изменить этот значок на другой при нажатии на этот значок.

Как мне это сделать с машинописью?

Я пробовал ответить тоже нет результата.

Кроме того, после изменения значка я хочу, чтобы второй щелчок изменил значок обратно на исходный значок. Как я могу это сделать?

Answer 1

В компоненте:

public icon = 'highlight_off'; 

public changeIcon(newIcon: string) {
    this.icon = newIcon; 
}

В шаблоне:

<mat-icon (click)="changeIcon('anotherIcon')">{{icon}}</mat-icon>

---

Обновление - для переключения между иконками

В компоненте:

public icon = 'highlight_off'; 

public toggleIcon() {
    if (this.icon === 'highlight_off') {
        this.icon = 'anotherIcon';
    } else {
        this.icon = 'highlight_off'
    }
}

В шаблоне:

<mat-icon (click)="toggleIcon()">{{icon}}</mat-icon>