Change Angular material button style based on the resolution

Question

I need to remove text from my button if the screen is small in size. Which I did using Flex API. I also need to change the button style to "mat-mini-fab" from "mat-raised-button". How can make this button attribute conditional? ex on small screen attribute "mat-mini-fab" should be applied else "mat-raised-button". Preferring to use Flex API here something like fxShow fxHide used for elements.

 <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 and mat-mini-fab are directives (actually they are part of a directive selector), and directives can not be made conditional. Your only option is to have different button elements for each directive/type screen size and use the flex api to show or hide them accordingly. For example:

<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>