【Angular】画像選択画面を作ろう！

ng new my-app
cd my-app
ng serve -o

<section>
  <div class="container">
    <!-- ユーザ数分繰り返し表示 -->
    <!-- ポイントはidにindexを設定すること -->
    <!-- "selectedItem == index"を満たす場合のみselectedというクラス名が付与される -->
    <div
      *ngFor="let user of users; let index = index"
      class="image-wrap"
      id="index"
      [class.selected]="selectedItem == index"
      (click)="onSelectItem(index)"
    >
      <!-- 画像のパスを設定  -->
      <!-- ※srcを単方向データバインディングすること -->
      <img [src]="user.path" />
    </div>
  </div>
</section>

<section>
  <h2>選択したユーザー</h2>
  <!-- ユーザが選択されたら表示される -->
  <div *ngIf="selectedUser">
    <p>I D ：{{ selectedUser.id }}</p>
    <p>名前：{{ selectedUser.name }}</p>
    <p>年齢：{{ selectedUser.age }}</p>
  </div>
</section>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  // ユーザの配列
  // ※画像は必ずassetsに格納すること
  users = [
    {
      name: 'サメハック',
      age: 30,
      id: 0,
      path: '../assets/images/samehack.png',
    },
    { name: 'ねこハック', age: 31, id: 1, path: '../assets/images/neko.png' },
    { name: 'いぬハック', age: 40, id: 2, path: '../assets/images/inu.png' },
    { name: 'ぶたハック', age: 23, id: 3, path: '../assets/images/buta.png' },
  ];

  /**
   * 選択された画像のindexが入る
   * 赤枠で囲うCSSを適用するために使用
   */
  selectedItem: number | null;
  /**選択されたユーザ */
  selectedUser: any;

  /**画像クリックで動く */
  onSelectItem(index: number) {
    // 同じ画像をクリックすると、選択中表示を外す
    if (this.selectedItem === index) {
      this.selectedItem = null;
      this.selectedUser = null;
      return;
    }

    // 選択中の画像を更新
    this.selectedItem = index;
    this.selectedUser = this.users[index];
  }
}

.container {
  // 画像を横に並べる
  display: flex;
  // ディスプレイ幅に応じて折り返す
  flex-wrap: wrap;
  .image-wrap {
    // 画像サイズ等の設定
    width: 200px;
    height: 200px;
    background-color: lightgoldenrodyellow;
    margin: 10px 10px 0 0;
    img {
      height: 100%;
      width: 100%;
    }
    // 選択された画像のみに適用するCSS
    &.selected {
      border: solid 5px red;
      width: 195px;
      height: 195px;
    }
  }
}