Angular materialのトグルボタン(Button toggle)パーツを使用する際、選択している側のボタンに対してCSSを適用させたい時に指定するクラスを確認しました。
mat-button-toggle-checked
Angular material公式ドキュメントのトグルボタン項目ページにはCSSについて記載がなく、公式ドキュメント上で開発ツールを開き選択切り替え前後のクラスを確認し特定しました。("Angular Material toggle button selected"等で検索もしたものの、結局は開発ツールを使うのが早かったです。)
CSSファイル内での指定例はこちら。
.mat-button-toggle-checked {
background-color:
; #e0e0e0 font-weight:bold;
}
これを追加すると、クリックしたボタンの背景色が変わり文字が太字になります。
特定のボタンをデフォルトで選択する方法は、こちらで紹介されていたvalueにcheckedを追加する手順が参考になりました。
checkedを追加したボタンが初期選択された状態になります。
<mat-button-toggle-group name="favoriteColor" #colorGroup="matButtonToggleGroup">
<mat-button-toggle value="red">Red</mat-button-toggle>
<mat-button-toggle value="green" checked>Green</mat-button-toggle>
<mat-button-toggle value="blue">Blue</mat-button-toggle>
</mat-button-toggle-group>
複数の方法が載っていますが、これが楽でした。
参考
https://material.angular.io/components/button-toggle/
https://www.concretepage.com/angular-material/angular-material-button-toggle-default-selected