Изменить стиль кнопки Угловой материал в зависимости от разрешения

Question

Мне нужно удалить текст с моей кнопки, если экран маленький по размеру. Что я и сделал, используя Flex API. Мне также нужно изменить стиль кнопки на "mat-mini-fab" с "mat-поднял-button". Как сделать атрибут этой кнопки условным? Например, на маленьком экране следует применить атрибут "mat-mini-fab", иначе "mat-поднял-button". Предпочитая использовать Flex API здесь что-то вроде fxShow fxHide используется для элементов.

 <button matTooltip="Save" mat-raised-button (click)="saveMember()" color="accent" class="submit-button" aria-label="SAVE" [disabled]="memberForm.invalid">
          <mat-icon>save</mat-icon><span fxHide fxShow.gt-sm>SAVE</span>
 </button>

Answer 1

mat-raised-button а также mat-mini-fab являются директивами (фактически они являются частью селектора директив), и директивы нельзя сделать условными. Единственный вариант - иметь разные элементы кнопок для каждого размера экрана директивы / типа и использовать flex api, чтобы отобразить или скрыть их соответствующим образом. Например:

<button mat-raised-button fxHide fxShow.gt-sm>
    <mat-icon>save</mat-icon>
    SAVE
</button>
<button mat-mini-fab fxShow fxHide.gt-sm>
    <mat-icon>save</mat-icon>
</button>