Как я могу динамически изменить форму пользовательского элемента clr-icon?

Question

В документах Clarity Icon они показывают, что вы можете использовать атрибут shape, чтобы установить форму иконок следующим образом:

<clr-icon shape="info-circle" size="16"></clr-icon>

В моем угловом шаблоне я использую элемент clr-icon, например:

<clr-icon [shape]="myShape"></clr-icon>

И используйте мой компонент, чтобы установить строковое значение формы, связанной с myShape:

export class MyComponent {
    public myShape = 'volume-up';

    changeShape() {
        if(this.myShape === 'volume-up') {
            this.myShape = 'volume-mute';
            return;
        }
        this.myShape = 'volume-up;
    }
}

Используя кнопку (не показана в шаблоне), я хочу запустить changeShape() динамически изменить форму значка, но ничего не происходит, что я пропускаю?

Answer 1

Пожалуйста, обратитесь к разделу Цели привязки синтаксиса угловых шаблонов. Ссылка: https://angular.io/guide/template-syntax

Вам необходимо использовать:

[attr.shape]="myShape"

Демонстрация: https://plnkr.co/edit/m4v5hXMxWRL5ObD3TPaO?p=preview