【Angular】チェックボックスを自作しよう！

ng new my-app　--no-standalone
ng generate component custom-checkbox
cd my-app
ng serve -o

ng new my-app   →   新規Angularアプリの作成
ng generate component custom-checkbox　→　コンポーネント作成
cd my-app       →   ディレクトリ移動
ng serve -o     →   作成したAngularアプリの起動

<form>
  <!-- forms配列をループしてカスタムチェックボックスを生成します -->
  <div *ngFor="let form of forms">
    <app-custom-checkbox
      [(ngModel)]="form.isChecked"
      name="customCheckbox{{ form.id }}"
      [label]="form.userName"
      [color]="'pink'"
      [disabled]="form.id === 3"
      (valueChange)="onCheckboxChange($event, form.id)"
    >
    </app-custom-checkbox>
  </div>
</form>

<p>Form values:</p>
<ul>
  <li *ngFor="let form of forms">{{ form.userName }}: {{ form.isChecked }}</li>
</ul>

<!-- <app-custom-checkbox
  [(ngModel)]="値を連動させる"
  name="各チェックボックスに一意の名前を付けるために使用"
  [label]="チェックボックス横のテキスト"
  [disabled]="disabledとする際の条件"
  [color]="'$Colorsより選択'"
  (valueChange)="変更を受け取る関数"
>
</app-custom-checkbox> -->

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'custom-checkbox';
  checkBoxValue: boolean = false;

  forms = [
    { id: 1, userName: 'サメハック', isChecked: false },
    { id: 2, userName: 'いぬハック', isChecked: false },
    { id: 3, userName: 'ねこハック', isChecked: false },
    { id: 4, userName: 'ぶたハック', isChecked: false },
  ];

  // チェックボックス変更を検知するメソッド
  onCheckboxChange(isChecked: boolean, id: number) {
    console.log('id', id);
    console.log('isChecked', isChecked);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomCheckboxComponent } from './custom-checkbox/custom-checkbox.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, CustomCheckboxComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<!-- ダイナミックにクラスを設定する
     クリックされた時に toggle() メソッドを呼び出す -->
<div [ngClass]="getColor()" (click)="toggle()">
  <!-- チェックボックスの状態を value プロパティにバインド
       無効状態を disabled プロパティにバインド -->
  <input type="checkbox" [checked]="value" [disabled]="disabled" />

  <!-- カスタムチェックボックスのスタイルを適用するための要素 -->
  <span class="custom-checkbox"></span>

  <!-- チェックボックスのラベル -->
  <label>{{ label }}</label>
</div>

import {
  Component,
  EventEmitter,
  Input,
  Output,
  forwardRef,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-checkbox', // コンポーネントのセレクタ
  templateUrl: './custom-checkbox.component.html', // テンプレートファイル
  styleUrls: ['./custom-checkbox.component.scss'], // スタイルファイル
  providers: [
    {
      provide: NG_VALUE_ACCESSOR, // NG_VALUE_ACCESSORトークンを提供
      useExisting: forwardRef(() => CustomCheckboxComponent), // コンポーネント自体を使用
      multi: true, // 複数のプロバイダーを許可
    },
  ],
})
export class CustomCheckboxComponent implements ControlValueAccessor {
  @Input() label: string = ''; // 外部からラベルを受け取るためのInputプロパティ
  @Input() disabled: boolean = false; // 外部からdisabled状態を受け取るためのInputプロパティ
  @Input() color: string = 'default'; // 外部から色情報を受け取るためのInputプロパティ
  @Output() valueChange = new EventEmitter(); // 変更を親に渡す
  value: boolean = false; // チェックボックスの内部状態

  PLEFIX = 'custom-checkbox-';

  // クラス名の取得
  getColor() {
    return this.PLEFIX + this.color;
  }

  // コールバック関数の初期化
  onChange = (value: boolean) => {};
  onTouched = () => {};

  // フォームコントロールから新しい値を受け取ったときに呼ばれる
  writeValue(value: boolean): void {
    this.value = value;
  }

  // フォームコントロールに値の変更を伝えるための関数を登録
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // フォームコントロールにタッチイベントを伝えるための関数を登録
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // フォームコントロールからdisabled状態を受け取ったときに呼ばれる
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  // チェックボックスの状態をトグルする
  toggle(): void {
    if (!this.disabled) {
      this.value = !this.value;
      this.onChange(this.value); // 新しい値をフォームコントロールに伝える
      this.onTouched(); // タッチイベントをフォームコントロールに伝える
      this.valueChange.emit(this.value); // 親に値を渡す
    }
  }
}

$colors: (
  default: (
    // 文字色（白）
    label-color: #343a40,
    // 未チェックの際の枠の色（黒）
    un-checked-frame: #343a40,
    // チェックボックス内の色（黒）
    checkbox: #343a40,
    // チェックドのマークの色（白）
    checked-mark: #ffffff,
    // チェックドの際の枠の色（黒）
    checked-frame: #343a40,
  ),
  red: (
    // 文字色
    label-color: #dc3545,
    // 未チェックの際の枠の色
    un-checked-frame: #dc3545,
    // チェックボックス内の色
    checkbox: #dc3545,
    // チェックドのマークの色
    checked-mark: #721c24,
    // チェックドの際の枠の色
    checked-frame: #dc3545,
  ),
  blue: (
    // 文字色
    label-color: #007bff,
    // 未チェックの際の枠の色
    un-checked-frame: #007bff,
    // チェックボックス内の色
    checkbox: #007bff,
    // チェックドのマークの色
    checked-mark: #004085,
    // チェックドの際の枠の色
    checked-frame: #007bff,
  ),
  yellow: (
    // 文字色
    label-color: #ffc107,
    // 未チェックの際の枠の色
    un-checked-frame: #ffc107,
    // チェックボックス内の色
    checkbox: #ffc107,
    // チェックドのマークの色
    checked-mark: #856404,
    // チェックドの際の枠の色
    checked-frame: #ffc107,
  ),
  pink: (
    // 文字色
    label-color: #e83e8c,
    // 未チェックの際の枠の色
    un-checked-frame: #e83e8c,
    // チェックボックス内の色
    checkbox: #e83e8c,
    // チェックドのマークの色
    checked-mark: #6f0421,
    // チェックドの際の枠の色
    checked-frame: #e83e8c,
  ),
  green: (
    // 文字色
    label-color: #28a745,
    // 未チェックの際の枠の色
    un-checked-frame: #28a745,
    // チェックボックス内の色
    checkbox: #28a745,
    // チェックドのマークの色
    checked-mark: #155724,
    // チェックドの際の枠の色
    checked-frame: #28a745,
  ),
);

@each $color-name, $color in $colors {
  $label-color: map-get($color, label-color);
  $un-checked-frame: map-get($color, un-checked-frame);
  $checkbox: map-get($color, checkbox);
  $checked-mark: map-get($color, checked-mark);
  $checked-frame: map-get($color, checked-frame);

  .custom-checkbox-#{$color-name} {
    input[type="checkbox"] {
      display: none; /* チェックボックスを非表示にする */
    }

    /* 自作のチェックボックスの装飾用 */
    .custom-checkbox {
      display: inline-block; /* インラインブロック要素として表示 */
      width: 20px; /* 幅指定 */
      height: 20px; /* 高さ指定 */
      border: 2px solid $un-checked-frame; /* 枠線の赤 */
      background-color: transparent; /* デフォルトの背景色 */
      vertical-align: middle; /* 垂直方向の中央揃え */
      line-height: 1; /* ラインハイトをリセット */
      box-sizing: border-box; /* border-boxモデルを使用して要素のサイズを計算 */
      margin-right: 5px; /* チェックボックスとテキストの間隔 */
      top: -0.05em; /* 少し下にずれるので微調整 */
      position: relative; /* 相対位置指定 */
      border-radius: 2.5px; /* 丸み※20pxくらいにすると円になる */
    }

    /* チェックされたときの装飾 */
    input[type="checkbox"]:checked + .custom-checkbox {
      background: $checkbox;
      border-color: $checked-frame; /* 枠の色 */
    }

    /* チェックボックスのチェックマークのスタイル */
    input[type="checkbox"]:checked + .custom-checkbox::after {
      content: ""; /* コンテンツを追加 */
      position: absolute; /* 絶対位置指定 */
      top: 0%; /* 上端を中央に配置 */
      left: 25%; /* 左端を中央に配置 */
      width: 5px; /* 幅指定 */
      height: 10px; /* 高さ指定 */
      border: solid $checked-mark; /* チェックマークの色 */
      border-width: 0 2px 2px 0; /* チェックマークの形状を指定 */
      transform: rotate(45deg); /* チェックマークを回転させる */
    }

    /* テキストのスタイル */
    label {
      color: $label-color; /* テキストの色を指定 */
    } /* チェックボックスがdisabledの場合のスタイル */
    input[type="checkbox"]:disabled + .custom-checkbox {
      pointer-events: none; /* マウスイベントを無効化してクリックを無効にする */
      border-color: darkgray;
    } /* チェックボックスがdisabledの場合のテキストのスタイル */
    input[type="checkbox"]:disabled + .custom-checkbox + label {
      color: darkgray; /* テキストの色をダークグレーにする */
    } /* チェックボックスがdisabledでかつチェックされた場合のスタイル */
    input[type="checkbox"]:disabled:checked + .custom-checkbox {
      background-color: darkgray; /* チェックされていてdisabledの場合の背景色を指定 */
    }
  }
}