【Angular】*ngForでidやclassを動的に設定しよう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回は*ngForでidやclassを動的に設定する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

idが動的に設定できる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

実行環境

*ngForでidやclassを動的に設定しよう！
1. 属性を動的に設定する構文
実際に動かしてみよう！
1. app.component.ts
2. app.component.html
まとめ

*ngForでidやclassを動的に設定しよう！

属性を動的に設定する構文

<div [属性名]="値">

属性名を[]で囲うことでAngular(TypeScript)の値を設定できるよ！
このHTML属性をTypeScriptと紐付けることをプロパティバインディングというよ！

プロパティバインディングについて詳しく知りたい方はこちらの記事を参考にしてください。

【Angular】プロパティバインディングを設定しよう!【HTML属性の操作】

実際に動かしてみよう！

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  userList = [
    { name: 'サメハック', id: 'A001' },
    { name: 'ねこハック', id: 'A002' },
    { name: 'いぬハック', id: 'A003' },
  ];
}

app.component.html

<ul>
  <!-- userListの値を一つずつ取り出す -->
  <li *ngFor="let user of userList">
    <!-- id属性にuser.idを設定 -->
    <p [id]="user.id">{{ user.name }}</p>
  </li>
</ul>

ng serve -o

開発者ツールで確認してみると、
それぞれにIDが設定されていることがわかりました。

まとめ

ループ処理でIDやクラス名を動的に設定するにはプロパティバインディングを使う

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram