【Angular】チェックボックスを一括操作しよう！【ngModelChange】

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

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

Angularの解説シリーズです。

今回はチェックボックスを一括操作する方法について学んでいきましょう！

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

この記事を読むと・・・

チェックボックスを一括操作することが出来る

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

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

作りたいもの
1. 実行環境
今回使う技術
1. ngModelを使う構文
  1. FormsModuleインポート
  2. ngModel
2. ngModelChangeを使う構文
チェックボックスを一括操作しよう！
GitHubのサンプルコード
まとめ

作りたいもの

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

実行環境

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

今回使う技術

ngModel
ngModelChange

ngModelを使う構文

FormsModuleインポート

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, // ngModelを使用するためのモジュール
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

ngModel

<input [(ngModel)]="変数名">

これで双方向データバインディングが出来るよ！
ngModelについて詳しく知りたい人は↓を参考にしてね！

【Angular】ngModelを使おう！【双方向データバインディング】

ngModelChangeを使う構文

<input [(ngModel)]="変数名" (ngModelChange)="関数名($event)">

$event // 変更されたイベントが取得できる

changeとの違いはイベントの変更部分のみが受け取れる点だよ！
HTMLのIDやクラス名を取得したい場合はchangeを使おう！

【Angular】ngModelChangeを使って入力監視をしよう!

404 NOT FOUND – サメハック

Infomation for Engineer🦈

チェックボックスを一括操作しよう！

今回は以下のように複数のチェックボックスを一括操作するチェックボックスを作成します

一括をチェックする　→ ①②③がすべてチェックされる
一括を未チェックに　→ ①②③をすべて未チェックに

よくある①②③を一括変更するチェックボックスだよ！

app.component.html

<p>一括<input type="checkbox" [(ngModel)]="all" (ngModelChange)="isToggle($event)" /></p>

<span>①<input type="checkbox" [(ngModel)]="checkbox1" /></span>
<span>②<input type="checkbox" [(ngModel)]="checkbox2" /></span>
<span>③<input type="checkbox" [(ngModel)]="checkbox3" /></span>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, // ngModelを使用するためのモジュール
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  all: Boolean = false;
  checkbox1: Boolean = false;
  checkbox2: Boolean = false;
  checkbox3: Boolean = false;

  isToggle(event: Boolean) {
    // 一括を操作
    if (event) {
      // ①②③全てをチェックドに
      this.checkbox1 = true;
      this.checkbox2 = true;
      this.checkbox3 = true;
    } else {
      // ①②③全てのチェックを外す
      this.checkbox1 = false;
      this.checkbox2 = false;
      this.checkbox3 = false;
    }
  }
}

これでnpm startすると同じものが出来上がるよ！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
使いたい人は是非ダウンロードしてみてください。

GitHub - same-hack/Angular-checkbox: 複数のチェックボックスを制御する

複数のチェックボックスを制御する. Contribute to same-hack/Angular-checkbox development by creating an account on GitHub.

まとめ

ngModelとngModelChangeを活用するとチェックボックスを一括操作することが出来る

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

twitter
instagram