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?

Issue Analytics

State:
Created 5 years ago
Reactions:23
Comments:15 (4 by maintainers)

Top GitHub Comments

20reactions

maxdonetskcommented, Jul 14, 2020

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

9reactions

intellixcommented, Mar 26, 2019

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>

Top Results From Across the Web

Angular Material bind button type dynamically - Stack Overflow

I'm using Angular Material in my project. I want to set the button type dynamically based on a variable ...

Alpha Anywhere | Change Button Text Dynamically

The contents of a button can be dynamically set at run-time using JavaScript.

Dynamic button configuration in iOS 15 - Sarunw

We will learn how to change button configuration based on the internal changes, e.g., highlighted and selected, and external changes, e.g., your ...

Dynamic Handling of buttons in Tkinter - Plus2net

Creating buttons dynamically ... We can set a variable to any integer and based on this value , number of buttons will be...

Create dynamic HTML button element with JavaScript/jQuery

In vanilla JavaScript, you can use the document.createElement() method to programmatically create an HTML button element and set its required attributes. Then ...