Skip to main content

angular material - Vertical Button toggle group

app.component.html 

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


<div style="padding: 25px;">
  <mat-button-toggle-group 
    #toggleGroup="matButtonToggleGroup" vertical="true">
    <mat-button-toggle value="android">
      Android
    </mat-button-toggle>
    
    <mat-button-toggle value="java">
      Java
    </mat-button-toggle>
    
    <mat-button-toggle value="kotlin">
      Kotlin
    </mat-button-toggle>

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

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


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

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