【Angular】*ngForでcheckboxとlabelを連動させよう！

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

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

Angularの解説シリーズです。

今回は*ngForでcheckboxとlabelを連動させる方法について学んでいきましょう！

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

この記事を読むと・・・

*ngForでcheckboxとlabelを連動させる

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

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

実行環境

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

実行環境

*ngForでcheckboxとlabelを連動させよう！
1. checkboxとlabelを連動させる構文
実際に動かしてみよう！
1. app.component.ts
2. app.component.html
まとめ

*ngForでcheckboxとlabelを連動させよう！

checkboxとlabelを連動させる構文

<input type="checkbox" [id]="ID" />
<label [for]="ID">{{ テキスト }}</label>

属性名を[]で囲うことで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', isChecked: true },
    { name: 'ねこハック', id: 'A002', isChecked: false },
    { name: 'いぬハック', id: 'A003', isChecked: false },
  ];
}

app.component.html

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

ng serve -o

実際にブラウザ上で確認してみると
checkboxとlabelが正しく連動していることがわかりました。

まとめ

チェックボックスのidとラベルのforをプロパティバインディングすることで連動させることが可能

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

twitter
instagram