Динамическое связывание matSuffix и matPrefix в зависимости от условия angular материал 9

Question

Как я могу динамически связывать matSuffix и matPrefix на mat-icon в angular 9 дизайне материалов?

Мне не понравилось, как я это сделал. Есть ли лучший способ сделать это?

<div *ngIf="condition; else elseBlock"><mat-icon matSuffix>visibility_off</maticon></div>
<ng-template #elseBlock><mat-icon matPrefix>visibility_off</maticon></ng-template>

Я хочу сделать что-то вроде этого

<mat-icon [matPrefix/matSuffix] --> some condition>{{icon}}</mat-icon>

В зависимости от условия следует добавить matPrefix или matSuffix

Answer 1

<div [attr.matPrefix]="condition" [attr.matSuffix]="condition">

Примечание. При условии null атрибут удаляется