angular material - How to use Button toggle

app.component.html

<h2>Angular Material - How to use Button toggle</h2>


<div style="padding-top:25px; padding-bottom:25px;">
  <mat-button-toggle #toggleBtn>
    Toggle
  </mat-button-toggle>
</div>


<h1>{{toggleBtn.checked}}</h1>

<h1>
  Toggle button is {{
    toggleBtn.checked? 'checked/on': 'uncheked/off'
  }} now.
</h1>

app.module.ts [import]

import {MatButtonToggleModule} from '@angular/material/button-toggle';

More Angular tutorials

• angular - How to use ternary operator
• angular - How to generate random number
• angular - Generate random number in range
• angular bootstrap - Popover with HTML content
• angular bootstrap - How to delay Popover open close
• angular bootstrap - Datepicker navigate & select today
• angular bootstrap - Datepicker navigate event
• angular bootstrap - How to collapse Accordion all panels
• angular bootstrap - Accordion panel custom header
• angular material - How to use basic Button
• angular material - How to use raised Button
• angular material - How to use FAB
• angular material - How to use mini FAB
• angular material - How to use Button toggle group
• angular material - Button toggle group multiple selection