how to change mat-stroked-button to mat-button in typescript class?

Question

I have a material button mat-stroked-button as the following:

<button mat-stroked-button color="accent" class="mat-login-header">Login</button>

I need if the user uses a smaller screen size or resolution (such as mobile screen) the button changes its type to mat-button, so in the component constructor I am trying:

constructor() {
  if(document.body.clientWidth < 600) {
    //how to change the button from mat-stroked-button to mat-button?
  }
}

So how can I change it to mat-button if document width is less than 600 and otherwise keep it mat-stroked-button

Answer 1

Right now. Using two buttons with *ngIf is obsolete. You can use the class to style your buttons instead of the directive. With that said, the following line works.

<button mat-button [ngClass]={"mat-stroked-button": isScreenSmall} color="accent" class="mat-login-header">Login</button>

isScreenSmall is a boolean variable that indicates if the screen size is mobile.