【Angular】MatButtonToggleModuleによるトグルボタン実装

Webアプリにおいてよく作られるものとしてトグルボタンがあります。
これは複数の選択肢のうち1つだけを選択するためのもので、概ね動きとしてはラジオボタンのようになります。
こちらはMatButtonToggleModuleというものを使うことで実装できます。

スポンサーリンク

MatButtonToggleModuleをインポート

まず、MatButtonToggleModuleを使えるようにするためにapp.module.tsに追記していきます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonToggleModule } from '@angular/material/button-toggle'
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonModule,
    MatIconModule,
    MatButtonToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

マーカーしている部分を追記していただければ良いです。
import文を追記して、NgModuleデコレータのimportにMatButtonToggleModuleを追加してください。

トグルボタンを作る

コンポーネントのHTMLにこのように書いてみましょう。

<div>
    <p>トグルボタンを表示していく</p>
    <mat-button-toggle-group #tgl="matButtonToggleGroup" (change)="tglChange(tgl.value)">
        <mat-button-toggle value="1">あ</mat-button-toggle>
        <mat-button-toggle value="2">い</mat-button-toggle>
        <mat-button-toggle value="3">う</mat-button-toggle>
        <mat-button-toggle value="4">え</mat-button-toggle>
        <mat-button-toggle value="5">お</mat-button-toggle>
    </mat-button-toggle-group>
    <p>{{text}}</p>
</div>

トグルボタンになるのはマーカーした部分です。
<mat-button-toggle-group>の中に<mat-button-toggle>を書いていきます。
<mat-button-toggle> のvalueで指定した値が、そのボタンが選択された際の値になります。
<mat-button-toggle-group>の「tgl="matButtonToggleGroup" (change)="tglChange(tgl.value)"」で、選択しているボタンが変わった際に、valueを引数としてtglChangeメソッドが呼び出されるようになります。

ちなみにCSSは今回このようにしました。

div{
    background-color: lightgreen;
}
p{
    font-size: 16px;
    color:black;
    margin: 14px;
}

次にTSファイルを編集します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-study';
  text:string = "トグルボタン未選択";

  constructor(){ }

  tglChange(value:any){
    this.text = "左から" + value + "つ目を選択中";
  }
}

tglChangeメソッドでトグルボタンの選択されているボタンが変わった際に表示するメッセージが変化するようにしています。

作成した画面

実際にこれで画面を表示するとこうなります。

何かしらボタンをクリックしていくとこうなります。

終わりに

今回はシンプルなテキストを表示するようにしましたが、
よくある例として、選択されたボタンによって画像や動画を表示させることもよくあります。
最近特に使われるようになってきているので、トグルボタンの作成はマスターしていきたいですね。

スポンサーリンク

Angular開発

Posted by 社畜林檎