как заменить mat-stroked-button на mat-button в классе машинописи?

Question

У меня есть кнопка с матовой кнопкой для материала, как показано ниже:

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

Мне нужно, если пользователь использует экран меньшего размера или разрешение (например, экран мобильного телефона), кнопка меняет свой тип наmat-button, поэтому в конструкторе компонентов я пытаюсь:

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

Так, как я могу изменить его на mat-button, если ширина документа меньше 600, и в противном случае оставить его mat-stroked-button

Answer 1

Простой способ сделать это - создать переменную (например, useStroked), а затем использовать *ngIf с двумя различными компонентами кнопки Материал:

<button *ngIf="useStroked" mat-stroked-button color="accent" class="mat-login-header">Login</button>
<button *ngIf="!useStroked" mat-button color="accent" class="mat-login-header">Login</button>

Затем вам нужно будет установитьэта переменная в вашем классе TS (пример см. этот ответ ).

Я создал образец StackBlitz здесь .