Angular 6 Material mat-select の change イベントの代わりとなる selectionChange イベント

Angular 6 Material mat-select の change イベントの変更点

変更点の概要

• change イベント: 廃止
• 代替イベント: selectionChange

変更理由

change イベントは、ユーザーが選択したオプションだけでなく、その他の内部変更にも反応していました。そのため、change イベントを処理するコードは、意図しない動作を引き起こす可能性がありました。

selectionChange イベントは、ユーザーが選択したオプションが変更された場合にのみ発生するため、より予測可能な動作を提供します。

コードの変更方法

change イベントを使用していたコードは、selectionChange イベントに変更する必要があります。

例

<mat-select (change)="onSelectionChange($event)">
  ...
</mat-select>

上記コードを以下のように変更します。

<mat-select (selectionChange)="onSelectionChange($event)">
  ...
</mat-select>

補足

• selectionChange イベントは、$event オブジェクトに選択されたオプションの情報を含みます。

<mat-form-field>
  <mat-select placeholder="好きな色を選択してください" (selectionChange)="onColorChange($event)">
    <mat-option value="red">赤</mat-option>
    <mat-option value="green">緑</mat-option>
    <mat-option value="blue">青</mat-option>
  </mat-select>
</mat-form-field>

<p>選択された色: {{ selectedColor }}</p>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  selectedColor: string;

  constructor() { }

  ngOnInit() {
  }

  onColorChange(event: any) {
    this.selectedColor = event.value;
  }
}

コードの説明

• app.component.html ファイル:
  • mat-select コンポーネントは、selectionChange イベントに onColorChange メソッドをバインドしています。
  • {{ selectedColor }} は、選択されたオプションの値を表示します。
• app.component.ts ファイル:
  • AppComponent クラスは、selectedColor プロパティを持ち、選択されたオプションの値を保持します。
  • onColorChange メソッドは、selectionChange イベントによって呼び出され、選択されたオプションの値を selectedColor プロパティに格納します。

実行方法

1. Angular CLI を使用して新しいプロジェクトを作成します。
2. 上記のコードを app.component.html と app.component.ts ファイルに追加します。
3. ng serve コマンドを使用してアプリケーションを実行します。
4. ブラウザでアプリケーションを開き、mat-select コンポーネントからオプションを選択します。
5. 選択されたオプションの値が {{ selectedColor }} で表示されます。

mat-select コンポーネントの選択値を取得する他の方法

[(ngModel)] バインディングを使用すると、mat-select コンポーネントの選択値をコンポーネントのプロパティに直接バインドできます。

<mat-select [(ngModel)]="selectedColor">
  <mat-option value="red">赤</mat-option>
  <mat-option value="green">緑</mat-option>
  <mat-option value="blue">青</mat-option>
</mat-select>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  selectedColor: string;

  constructor() { }

  ngOnInit() {
    this.selectedColor = 'red';
  }
}

• app.component.html ファイル:

ViewChild デコレータを使用すると、mat-select コンポーネントのインスタンスに直接アクセスできます。

<mat-select #select>
  <mat-option value="red">赤</mat-option>
  <mat-option value="green">緑</mat-option>
  <mat-option value="blue">青</mat-option>
</mat-select>

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild('select') select: MatSelect;

  constructor() { }

  ngOnInit() {
  }

  getSelectedColor() {
    return this.select.value;
  }
}

• app.component.html ファイル:
• app.component.ts ファイル:
  • AppComponent クラスは、@ViewChild デコレータを使用して select テンプレート変数を参照し、MatSelect 型の select プロパティに格納します。
  • getSelectedColor メソッドは、select プロパティの value プロパティを使用して選択されたオプションの値を取得します。

formControlName ディレクティブを使用すると、mat-select コンポーネントを Reactive Forms に統合できます。

<mat-form-group>
  <mat-select formControlName="