Set button type dynamicaly

[mfarhani]

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?

[Shamim56]

you could just use the render 2 library remove/set attribute library for this

edit: cant actually do this, just use

<button *ngIf="!stroked" mat-button>Text</button>
<button *ngIf="stroked" mat-button-stroked>Text</button>"

[mfarhani]

you could just use the render 2 library remove/set attribute library for this

If i using setAttribute for this purpose, what should place instead value?
renderer.setAttribute(elRef,'mat-stroked-button','value')

[Shamim56]

it seems this cant actually be done using setAttribute since mat-button seems to be a directive

why not just use ngIf, this is usually the most common way to address something like this

<button *ngIf="!stroked" mat-button>Text</button>
<button *ngIf="stroked" mat-button-stroked>Text</button>"

[Totati]

I've had a similar question at stackoverflow, but nobody had a better idea... I understand why it can't be done, but it's sad I have to make 2 buttons all the time.

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

[mfarhani]

Thanks @intellix , i wrote some code similar this.

[maxpopovitch]

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

[amakhrov]

Dynamically setting the class works currently just because, based on the button source code (https://github.com/angular/components/blob/master/src/material/button/button.ts#L105) it's pretty much everything that those different attributes (mat-raised-button, mat-stroke-button, etc) do.
However, it's not a part of the official mat button api - so this can break in future.

I'm wondering if it would make sense to introduce a new input for a button variant (similar to variant prop in React's Material implementation: https://material-ui.com/components/buttons/) and deprecate existing attributes over time? For instance, we already have a single color input instead of relying on multiple mat-color-primary / mat-color-accent attributes.

[vjonas]

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

amazing, just what I was looking for. thank you!

[intellix]

The idea of doing this is nice:

<button mat-button class="mat-raised-button" color="primary">

But it doesn't really work due to .mat-button having more precedence on color and causing various other issues, which comes from theming.scss within Material:

.mat-button.mat-primary {
  color: black;
}

.mat-raised-button {
  color: white;
}

So I guess I have to go back to my solution which is even more problematic as I need to dynamically support <a> or <button> so have to duplicate all of that again.

My dynamic buttons/anchors from CMS were at 36 LOC but since I can't do that, I'm back to 200 LOC to achieve it since I need to switch over the variants for both anchors and buttons

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.