Set button type dynamicaly

Please describe the feature you would like to request.

I’m using MatButton directive as attribute like this: <button mat-button buttonType="{{button.type}}></button>" I want to change ‘mat-button’ directive according to ‘button.type’, for example if ‘button.type’ is ‘stroked’ then ‘mat-button’ changed to ‘mat-stroked-button’. How can to change type of button dynamicaly?

What is the use-case or motivation for this proposal?

Is there anything else we should know?

[maxdonetsk]

<button mat-button [ngClass]="condition ? 'mat-raised-button' : 'mat-stroked-button'">Button</button> You can also use ‘mat-flat-button’ instead of ‘mat-raised-button’ if you don’t need extra styling such as shadow.

[intellix]

I’m using a CMS to allow adding buttons dynamically and for the button.type I’m doing something like this:

export interface Button {
  id: string;
  text: string;
  type: string;
  color: string;
  routerLink: string;
}

<ng-container [ngSwitch]="data.type">
  <a *ngSwitchDefault mat-button [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
  <a *ngSwitchCase="'raised'" mat-raised-button [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
  <a *ngSwitchCase="'stroked'" mat-stroked-button [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
  <a *ngSwitchCase="'flat'" mat-flat-button [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
  <a *ngSwitchCase="'icon'" mat-icon-button [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
  <a *ngSwitchCase="'fab'" mat-fab [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
  <a *ngSwitchCase="'mini-fab'" mat-mini-fab [color]="data.color" [routerLink]="data.routerLink">{{ data.text }}</a>
</ng-container>