Skip to main content

angular material - Button toggle group multiple selection

app.component.html

<h2>Angular Material - Button toggle group multiple selection</h2>


<div style="padding: 25px;">
  <mat-button-toggle-group 
    #toggleGroup="matButtonToggleGroup" multiple>
    <mat-button-toggle value="angular">
      Angular
    </mat-button-toggle>
    
    <mat-button-toggle value="react">
      React
    </mat-button-toggle>
    
    <mat-button-toggle value="vue">
      Vue
    </mat-button-toggle>
    
    <mat-button-toggle value="html">
      HTML
    </mat-button-toggle>
    
    <mat-button-toggle value="css">
      CSS
    </mat-button-toggle>
    
  </mat-button-toggle-group>
</div>


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

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