Angular Material タブのプログラム制御

Angular 2 Material で mat-tab-group 内の mat-tab をプログラム的に選択する

Angular 2 Material の mat-tab-group コンポーネントは、タブインターフェースを作成するための便利なツールです。このコンポーネントは、複数の mat-tab コンポーネントをグループ化し、ユーザーがタブをクリックして切り替えることができるようにします。

プログラムによる選択

時には、ユーザーの操作ではなく、プログラム的に mat-tab を選択する必要がある場合があります。例えば、特定の条件に基づいてタブを切り替える場合や、外部のイベントに応答する場合などです。

Angular 2 Material では、mat-tab-group コンポーネントの selectedIndex プロパティを使用して、アクティブなタブのインデックスを制御することができます。

例

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

@Component({
  selector: 'app-tab-group',
  templateUrl: './tab-group.component.html',
  styleUrls: ['./tab-group.compo   nent.css']
})
export class TabGroupComponent implemen   ts OnInit {
  selectedIndex = 0;

  ngOnInit() {
    // 初期選択
    // this.selectedIndex = 2; // 3番目のタブを選択
  }

  selectTab(index: number) {
    this.selectedIndex = index;
  }
}

HTML

<mat-tab-group [(selectedIndex)]="selectedIndex">
  <mat-tab label="First Tab">
    </mat-tab>
  <mat-tab label="Second Tab">
    </mat-tab>
  <mat-tab label="Third Tab">
    </mat-tab>
</mat-tab-group>

解説

• selectTab メソッドは、任意のインデックスのタブを選択するために使用されます。
• ngOnInit ライフサイクルフックを使用して、初期選択を設定することができます。
• selectedIndex プロパティは、アクティブなタブのインデックスを保持します。インデックスは 0 から始まります。

• mat-tab-group コンポーネントは、animation プロパティを使用して、タブの切り替えアニメーションを制御することができます。
• mat-tab コンポーネントには、disabled プロパティがあり、タブを無効にすることができます。
• mat-tab-group コンポーネントは、selectedIndexChange イベントを発出します。このイベントを使用して、タブの切り替えを検知することができます。

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

@Component({
  selector: 'app-tab-group',
  templateUrl: './tab-group.component.html',
  styleUrls: ['./tab-group.compo   nent.css']
})
export class TabGroupComponent implemen   ts OnInit {
  selectedIndex = 0;

  ngOnInit() {
    // 初期選択
    // this.selectedIndex = 2; // 3番目のタブを選択
  }

  selectTab(index: number) {
    this.selectedIndex = index;
  }
}

<mat-tab-group [(selectedIndex)]="selectedIndex">
  <mat-tab label="First Tab">
    </mat-tab>
  <mat-tab label="Second Tab">
    </mat-tab>
  <mat-tab label="Third Tab">
    </mat-tab>
</mat-tab-group>

プログラムによる選択 - 別の方法

@ViewChild デコレータを使用する

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app   -tab-group',
  templateUrl: './tab-group.component.html',
  styleUrls: ['./tab-group.component.css']
})
export class TabGroupComponent implemen   ts OnInit {
  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;

  ngOnInit() {
    // 初期選択
    this.tabGroup.selectedIndex = 2; // 3番目のタブを選択
  }

  selectTab(index: number) {
    this.tabGroup.selectedIndex = index;
  }
}

• tabGroup プロパティを使用して、mat-tab-group コンポーネントのメソッドやプロパティにアクセスします。
• @ViewChild デコレータを使用して、mat-tab-group コンポーネントへの参照を取得します。

import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { MatTab } from '@angular/material/tabs';

@Component({
  selector: 'app-tab-group',
  templateUrl: './tab-group.component.html',
  styleUrls: ['./tab-group.component.css']
})
export class TabGroupComponent implemen   ts OnInit {
  @ViewChildren(MatTab) tabs!: QueryList<MatTab>;

  ngOnInit() {
    // 初期選択
    this.tabs.get(2).select(); // 3番目のタブを選択
  }

  selectTab(index: number) {
    this.tabs.get(index).select();
  }
}

TemplateRef を使用してタブを動的に生成する

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-tab-group',
  templateUrl: './tab-group.component.html',
  styleUrls: ['./tab-group.component.css']
})
export class TabGroupComponent implemen   ts OnInit {
  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
  @ViewChild('firstTabTemplate') firstTabTemplate!: TemplateRef<any>;
  @ViewChild('secondTabTemplate') secondTabTemplate!: TemplateRef<any>;
  @ViewChild('thirdTabTemplate') thirdTabTemplate!: TemplateRef<any>;

  ngOnInit() {
    // 初期選択
    this.tabGroup.addTab(this.firstTabTemplate);
    this.tabGroup.addTab(this.secondTabTemplate);
    this.tabGroup.addTab(this.thirdTabTemplate);
    this.tabGroup.selectedIndex = 2; // 3番目のタブを選択
  }

  selectTab(index: number) {
    this.tabGroup.selectedIndex = index;
  }
}

• mat-tab-group コンポーネントの addTab メソッドを使用して、タブを動的に追加します。
• TemplateRef を使用して、タブのテンプレートを定義します。