Skip to main content

angular material - How to set Button toggle appearance

app.component.html 

<h2>Angular Material - How to set Button toggle appearance</h2>


<div style="padding:25px; background-color:lightgray;">
  <h3>Appearance Standard (Default)</h3>

  <mat-button-toggle 
    value="flash" 
    #toggleWifi 
    appearance="standard">
      Wifi
  </mat-button-toggle>
  
  <h1 style="padding:25px;">
    Wifi is {{toggleWifi.checked? 'on' : 'off'}} now.
  </h1>
</div>


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

  <mat-button-toggle 
    value="flash" 
    #toggleLocation 
    appearance="legacy">
      Location
  </mat-button-toggle>
  
  <h1 style="padding:25px;">
    Location is {{toggleLocation.checked? 'on' : 'off'}} now.
  </h1>
</div>
app.module.ts [import] 

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