0

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>
Paresh Varde
  • 1,084
  • 3
  • 16
  • 39

1 Answers1

3

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>
G. Tranter
  • 16,766
  • 1
  • 48
  • 68