Изменение стиля кнопки "Angular материал" на основе разрешения

Paresh Varde спросил: 12 мая 2018 в 04:39 в: flexbox

Мне нужно удалить текст с моей кнопки, если размер экрана невелик. Что я сделал с помощью Flex API. Мне также нужно изменить стиль кнопки на "mat-mini-fab" с "mat-raise-button". Как сделать атрибут этой кнопки условным? ex на атрибуте маленького экрана "mat-mini-fab" следует применять иначе "mat-raise-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>

flexbox angular-material-5

1 ответ

Есть решение

G. Tranter ответил: 12 мая 2018 в 07:19

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>