Angular: ボタンクリックで選択状態のままにする！

ユーザーにより直感的でわかりやすくなる！

イメージ

コンポーネントの中のHTML

<!-- ボタン1の背景色をbutton1Colorにバインド -->
<button (click)="Button1Color()" [style.background]="button1Color" 
style="padding:20px 60px; margin:10px;">
  Button 1
</button>
<!-- ボタン2の背景色をbutton2Colorにバインド -->
<button (click)="Button2Color()" [style.background]="button2Color" 
style="padding:20px 60px; margin:10px;">
  Button 2
</button>

コンポーネントの中のTypescript

export class 作ったコンポーネント名Component {
 
  // ボタン1の初期の背景色を黒に設定
　button1Color: string = 'black';
  // ボタン2の初期の背景色をグレーに設定
  button2Color: string = 'gray';

  Button1Color() {
    if (this.button1Color === 'gray') {
      // ボタン1の背景色を黒に変更
      this.button1Color = 'black';
      // ボタン2の背景色をグレーに変更
      this.button2Color = 'gray';
    　} 
　　else {
      // ボタン1の背景色をグレーに変更
      this.button1Color = 'gray';
    }
  }

  Button2Color() {
    if (this.button2Color === 'gray') {
      // ボタン2の背景色を黒に変更
      this.button2Color = 'black';
      // ボタン1の背景色をグレーに変更
      this.button1Color = 'gray';
    　} 
　　else {
      // ボタン2の背景色をグレーに変更
      this.button2Color = 'gray';
    }
  }

}

テンプレだから
シンプルですがCSSやSCSSを使ってデザインでちがう感じに
カスタマイズするのがオススメ！