Skip to main content

angular material - Button toggle group initially checked items

app.component.html 

<h2>
  Angular Material - 
  Button toggle group initially checked items
</h2>


<div style="padding: 25px;">
  <mat-button-toggle-group 
    #toggleGroup="matButtonToggleGroup" multiple>
    <mat-button-toggle value="sql">
      SQL
    </mat-button-toggle>
    
    <mat-button-toggle value="photoshop" checked>
      Photoshop
    </mat-button-toggle>
    
    <mat-button-toggle value="kotlin" checked>
      Kotlin
    </mat-button-toggle>

    <mat-button-toggle value="bootstrap">
      Bootstrap
    </mat-button-toggle>

    <mat-button-toggle value="html" checked>
      HTML
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>


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

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