Angularでユーザー操作に応じてコンポーネントを表示する方法

2024-04-02

Angularでユーザー選択コンポーネントを持つ動的タブを実装する方法

Angularで、ユーザーがクリックした内容に応じてコンポーネントを動的に表示するタブ機能を実装する方法について解説します。

<div>
  <ul class="nav nav-tabs">
    <li *ngFor="let tab of tabs" (click)="selectTab(tab)">
      <a>{{tab.title}}</a>
    </li>
  </ul>
  <div [ngSwitch]="selectedTab">
    <ng-container *ngSwitchCase="tab.component" [ngComponentOutlet]="tab.component"></ng-container>
  </div>
</div>

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

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

  tabs: Array<{title: string, component: any}> = [
    {title: 'Tab 1', component: Tab1Component},
    {title: 'Tab 2', component: Tab2Component},
    {title: 'Tab 3', component: Tab3Component},
  ];
  selectedTab: any;

  constructor() {}

  ngOnInit() {
    this.selectedTab = this.tabs[0].component;
  }

  selectTab(tab: any) {
    this.selectedTab = tab.component;
  }
}

コード解説

tabs 配列に、タブのタイトルと表示するコンポーネントを定義します。
selectedTab 変数で、現在選択されているタブのコンポーネントを保持します。
*ngFor ディレクティブを使って、tabs 配列の各要素に対してタブメニューを表示します。
(click) イベントを使って、ユーザーがタブをクリックした際に selectTab メソッドを呼び出します。
selectTab メソッドは、引数で渡されたタブのコンポーネントを selectedTab 変数に格納します。
[ngSwitch] ディレクティブを使って、selectedTab 変数の値に基づいて表示するコンポーネントを切り替えます。
[ngComponentOutlet] ディレクティブを使って、動的にコンポーネントを生成します。

ポイント

tabs 配列は、必要に応じて拡張できます。
各タブのコンポーネントは、独自のロジックを持つことができます。
[ngComponentOutlet] ディレクティブを使うには、@angular/compiler パッケージをインストールする必要があります。

補足

上記は基本的な実装例です。より高度な機能を実装したい場合は、以下の方法を検討できます。

コンポーネント間のデータ共有: @Input / @Output デコレータ、サービス
タブの状態管理: NgRedux などの状態管理ライブラリ
アニメーション: @angular/animations パッケージ

<div>
  <ul class="nav nav-tabs">
    <li *ngFor="let tab of tabs" (click)="selectTab(tab)">
      <a>{{tab.title}}</a>
    </li>
  </ul>
  <div [ngSwitch]="selectedTab">
    <ng-container *ngSwitchCase="tab.component" [ngComponentOutlet]="tab.component"></ng-container>
  </div>
</div>

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

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

  tabs: Array<{title: string, component: any}> = [
    {title: 'Tab 1', component: Tab1Component},
    {title: 'Tab 2', component: Tab2Component},
    {title: 'Tab 3', component: Tab3Component},
  ];
  selectedTab: any;

  constructor() {}

  ngOnInit() {
    this.selectedTab = this.tabs[0].component;
  }

  selectTab(tab: any) {
    this.selectedTab = tab.component;
  }
}

app.component.html

タブメニューとコンポーネント表示エリアを定義

タブ情報と選択状態を管理するコンポーネント

Tab 1 に表示するコンポーネント

スタイルシート

各コンポーネントの内容は、必要に応じて変更できます。

実行方法

npm install コマンドを実行して必要なライブラリをインストールします。
ng serve コマンドを実行してアプリケーションを起動します。
ブラウザで http://localhost:4200 を開きます。

動作確認

タブメニューをクリックして、各タブを選択します。
各タブの内容が正しく表示されることを確認します。

このサンプルコードは、Angular で動的タブを実装するための基本的な方法を示しています。

Angularでユーザー選択コンポーネントを持つ動的タブを実装するその他の方法

ng-template を使用する方法

<div>
  <ul class="nav nav-tabs">
    <li *ngFor="let tab of tabs" (click)="selectTab(tab)">
      <a>{{tab.title}}</a>
    </li>
  </ul>
  <div>
    <ng-template *ngFor="let tab of tabs">
      <div *ngIf="selectedTab === tab.component">
        <ng-template [ngTemplateOutlet]="tab.template"></ng-template>
      </div>
    </ng-template>
  </div>
</div>

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

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

  tabs: Array<{title: string, template: any}> = [
    {title: 'Tab 1', template: tab1Template},
    {title: 'Tab 2', template: tab2Template},
    {title: 'Tab 3', template: tab3Template},
  ];
  selectedTab: any;

  constructor() {}

  ngOnInit() {
    this.selectedTab = this.tabs[0].component;
  }

  selectTab(tab: any) {
    this.selectedTab = tab.component;
  }
}