Angular Material ButtonToggle（10分で作成）

ボタントグルの使用法

このボタントグルの大事なところは、
「ラジオボタンまたはチェックボックスとして使用でき、
valueの値を反映し、
選択できる項目は1つだけ」という所です。
下のコードはcmaterial.module.tsです。
ここでは、
MatButtonToggleModuleをインポートしています。

  
 import { NgModule } from "@angular/core";
//追加コード
import {MatButtonToggleModule} from '@angular/material/button-toggle';

//変更コード
@NgModule({
 imports:[ MatButtonToggleModule ],
 exports:[ MatButtonToggleModule ]
})
export class CmaterialModule{} 
  

次はapp.component.htmlです。
mat-button-toggle-groupの、
aria-labelをVariable、
nameは、variable Nameとしています。
スキルが身につきますので、
皆さんも色々試して見ると良いと思います。

  
<p>
  デフォルトの外観 :<br/>
  <mat-button-toggle-group name="variable Name" aria-label="Variable">
    <mat-button-toggle value="x">変数：x</mat-button-toggle>
    <mat-button-toggle value="y">変数：y</mat-button-toggle>
    <mat-button-toggle value="z">変数：z</mat-button-toggle>
  </mat-button-toggle-group>
</p>  
  

app.component.cssでは、
mat-button-toggle-groupの、
margin-left（左側のマージン）は20pxにしています。
mat-button-toggleの文字色は青色、
文字サイズは20pxです。
ｐは文字色が青色、
文字サイズは25px、
margin-top(上側のマージン) は20pxにします。
表示を中央に持ってくるため、
text-alignをcenterにしています。

  
mat-button-toggle-group {
  margin-left: 20px;  
}

mat-button-toggle{
  color:blue;
  font-size:20px;
}

p{
  text-align:center;
  color:blue;
  font-size:25px;
  margin-top:20px ;
}  
  

今回は以上です。