Skip to main content

angular material - Button toggle group appearance

app.component.html 

<h2>Angular Material - Button toggle group appearance</h2>


<div style="padding:25px; background-color:lightgray;">
  <h3>Appearance Standard (Default)</h3>
  
  <mat-button-toggle-group 
    #toggleGroup="matButtonToggleGroup" appearance="standard">
    <mat-button-toggle value="html">
      HTML
    </mat-button-toggle>
    
    <mat-button-toggle value="css">
      CSS
    </mat-button-toggle>
    
    <mat-button-toggle value="javascript">
      JavaScript
    </mat-button-toggle>
  </mat-button-toggle-group>

</div>


<div style="padding:25px; background-color:lightgray;">
  <h3>Appearance Legacy</h3>

  <mat-button-toggle-group 
    #toggleGroupLegacy="matButtonToggleGroup" appearance="legacy">
    <mat-button-toggle value="flash">
      Flash
    </mat-button-toggle>
    
    <mat-button-toggle value="dreamweaver">
      Dreamweaver
    </mat-button-toggle>
    
    <mat-button-toggle value="photoshop">
      Photoshop
    </mat-button-toggle>
    
    <mat-button-toggle value="illustrator">
      Illustrator
    </mat-button-toggle>
  </mat-button-toggle-group>

</div>


<h1 style="padding:25px;">
  You selected : {{toggleGroup.value}}
</h1>

<h1 style="padding-left:25px;">
  You selected : {{toggleGroupLegacy.value}}
</h1>
app.module.ts [import] 

import {MatButtonToggleModule} from '@angular/material/button-toggle';
More Angular tutorials
Labels: