Angular Tree コンポーネントの概要

Angular Tree コンポーネントを使用すると、ユーザーは親子関係を持つツリービュー構造で階層データを表現したり、対応するデータモデルなしで静的なツリービュー構造を定義したりできます。その主な目的は、エンドユーザーが階層データ構造内を視覚化してナビゲートできるようにすることです。Ignite UI for Angular Tree コンポーネントは、ロードオンデマンド機能、項目のアクティブ化、組み込みのチェックボックス、組み込みのキーボードナビゲーションなどによる項目のバイステートおよびトライステートのカスケード選択も提供します。

Angular Tree の例

この基本的な Angular Tree の例では、ノード階層を指定し、階層データセットを反復処理することにより、igx-tree とそのノードを定義する方法を確認できます。

Ignite UI for Angular Tree を使用した作業の開始

Ignite UI for Angular Tree コンポーネントの使用を開始するには、最初に Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、次のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module ファイルに IgxTreeModule をインポートします。

// app.module.ts

...
import { IgxTreeModule } from 'igniteui-angular';
// import { IgxTreeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxTreeModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxTreeComponent をスタンドアロンの依存関係としてインポートすることも、IGX_TREE_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_TREE_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TREE_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-tree>
        <igx-tree-node>
            Angular Libraries
            <igx-tree-node>Ignite UI for Angular</igx-tree-node>
            <igx-tree-node>Angular Material</igx-tree-node>
        </igx-tree-node>
        <igx-tree-node>
            Web Component Libraries
            <igx-tree-node>Ignite UI for Web Components</igx-tree-node>
            <igx-tree-node>Open UI 5</igx-tree-node>
        </igx-tree-node>
        <igx-tree-node>
            Blazor Libraries
            <igx-tree-node>Ignite UI for Blazor</igx-tree-node>
        </igx-tree-node>
    </igx-tree>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TREE_DIRECTIVES]
    /* or imports: [IgxTreeComponent, IgxTreeNodeComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Tree モジュールまたはディレクティブをインポートしたので、igx-tree とそのパネルの基本構成を開始できます。

Angular Tree の使用

IgxTreeNodesComponent は、IgxTreeComponent に属するすべてのノードの表現です。ノードは、disabled、active、selected、および expanded プロパティを提供します。これにより、要件に応じてノードの状態を構成できます。data プロパティを使用して、ノードが表すデータエントリへの参照を追加できます。IgxTreeComponent.findNodes() を使用してノードを検索するには、[data] をバインドする必要があります。

ツリーの宣言

ノードは、次のいずれかのアプローチを使用して宣言できます。

ノード階層を指定し、データセットを反復処理することにより、ツリーとそのノードを宣言します。

<igx-tree>
	<igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpaded(node)" [selected]="isNodeSelected(node)">
		{{ node.text }}
		<img [src]="node.image" [alt]="node.imageAlt" />
		<igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpaded(child)" [selected]="isNodeSelected(child)">
            {{ child.text }}
		</igx-tree-node>
	</igx-tree-node>
</igx-tree>

ノードをデータモデルにバインドして、展開された状態と選択された状態が基になるデータにも反映されるようにすることができます。

<igx-tree (nodeSelection)="handleSelectionEvent($event)">
	<igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded" [(selected)]="node.selected">
		{{ node.text }}
		<img [src]="node.image" [alt]="node.imageAlt" />
		<igx-tree-node *ngFor="let child of node.children" [data]="child">
			<a igxTreeNodeLink [href]="child.url" target="_blank">
                {{ child.text }}
            </a>
		</igx-tree-node>
	</igx-tree-node>
</igx-tree>

静的な非バインドノードを作成してツリーを宣言します。

ツリーを描画するために、必ずしもデータセットは必要ありません。基になるデータモデルなしで個々のノードを作成できます。

<igx-tree>
	<igx-tree-node [expanded]="true" [selected]="false">
		I am a parent node 1
		<img src="hard_coded_src.webb" alt="Alt Text" />		
		<igx-tree-node [expanded]="true" [selected]="false">
			I am a child node 1
			<igx-tree-node>
				<a igxTreeNodeLink href="https://google.com" target="_blank">
				    I am a child node of the child
				</a>
			</igx-tree-node>
		</igx-tree-node>
	</igx-tree-node>

	<igx-tree-node [expanded]="false" [selected]="false">
		I am a parent node 2
		<img src="hard_coded_src.webb" alt="Alt Text" />
        <igx-tree-node [expanded]="false" [selected]="false">
			I am a child node 1
		</igx-tree-node>
	</igx-tree-node>

    <igx-tree-node [selected]="false" [disabled]="true">
		I am a parent node 3
	</igx-tree-node>
</igx-tree>

リンクのあるノード

ノードがリンクを描画する必要がある場合は、IgxTreeNodeLink ディレクティブを <a> タグに追加する必要があります。これにより、適切な aria ロールがノードの DOM 要素に割り当てられます。

<igx-tree>
	<igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpaded(node)" [selected]="isNodeSelected(node)">
		{{ node.text }}
		<img [src]="node.image" [alt]="node.imageAlt" />
		<igx-tree-node *ngFor="let child of node.children" [data]="child">
            <a igxTreeNodeLink [href]="child.url" target="_blank">
                {{ child.text }}
            </a>
		</igx-tree-node>
	</igx-tree-node>
</igx-tree>

ノードの操作

IgxTreeNodeComponent は、次の方法で展開または縮小することができます:

ノード展開インジケーター (デフォルトの動作) をクリックします。
igx-tree toggleNodeOnClick プロパティが true に設定されている場合、ノードをクリックします。

<igx-tree [toggleNodeOnClick]="true">
	<igx-tree-node *ngFor="let node of data" [data]="node">
		{{ node.text }}
		<igx-tree-node *ngFor="let child of node.children" [data]="child">
                {{ child.text }}
		</igx-tree-node>
	</igx-tree-node>
</igx-tree>

デフォルトでは、複数のノードを同時に展開できます。この動作を変更し、一度に 1 つのブランチのみを展開できるようにするには、singleBranchExpand プロパティを有効にすることができます。このようにして、ノードが展開されると、同じレベル内ですでに展開されている他のすべてのブランチが縮小されます。

<igx-tree [singleBranchExpand]="true">
	<igx-tree-node *ngFor="let node of data" [data]="node">
		{{ node.text }}
		<igx-tree-node *ngFor="let child of node.children" [data]="child">
                {{ child.text }}
		</igx-tree-node>
	</igx-tree-node>
</igx-tree>

さらに、IgxTree は、ノード操作のために次の API メソッドを提供します:

expand - アニメーションでノードを展開します。
collapse - アニメーションでノードを縮小します。
toggle - ノードの展開状態をアニメーションで切り替えます。
collapseAll - 指定されたノードをアニメーションで縮小します。ノードが渡されない場合は、すべての親ノードを展開します。
expandAll - 指定されたノードをアニメーションで展開されたものとして設定します。ノードが渡されない場合は、すべての親ノードを展開します。
deselectAll - すべてのノードの選択を解除します。ノード配列が渡されると、指定されたノードのみの選択が解除されます。nodeSelection イベントを発行しません。

ノードの検索

findNodes メソッドを使用して、IgxTree 内の特定のノードを見つけることができます。指定されたデータに一致するノードの配列を返します。複合主キーなど、より複雑なデータ構造シナリオでノードを検索する場合、データに基づいてノードを検索するための基準を指定するために、カスタム比較関数を渡すことができます。

<igx-tree>
	<igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpaded(node)" [selected]="isNodeSelected(node)">
		{{ node.text }}
		<img [src]="node.image" alt="node.imageAlt" />
		<igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpaded(child)" [selected]="isNodeSelected(child)">
            {{ child.text }}
		</igx-tree-node>
	</igx-tree-node>
</igx-tree>

export class MyTreeViewComponent {
  public data: { [key: string]: any, valueKey: string } = MY_DATA;
  @ViewChild(IgxTreeComponent, { read: IgxTreeComponent })
  public tree;

  findNode(valueKey: string) {
    const comparer: IgxTreeSearchResolver =
      (data: any, node: IgxTreeNodeComponent) => node.data.valueKey === data;
    const matchingNodes: IgxTreeNode<{ [key: string]: any, valueKey: string }>[] = this.tree.findNodes(valueKey, comparer);
  }
}

テンプレート

ノードの再利用可能なテンプレートを作成するには、igx-tree 内で <ng-template> を宣言します。

<igx-tree>
    <igx-tree-node *ngFor="let node of data" [data]="node">
        <ng-container *ngTemplateOutlet="#nodeTemplate; context: { $implicit: node }"></ng-container>
        <igx-tree-node *ngFor="let child of node.ChildCompanies" [data]="child">
            <ng-container *ngTemplateOutlet="#nodeTemplate; context: { $implicit: child}"></ng-container>
        </igx-tree-node>
    </igx-tree-node>
    <ng-template #nodeTemplate let-data>
        <div class="node-header company">
            <igx-icon class="company__logo">{{ data.Logo }}</igx-icon>
            <div class="company__name">{{ data.CompanyName }}</div>
        </div>
    </ng-template>
</igx-tree>

さらに、expandIndicator 入力を使用することにより、ノードの展開/縮小インジケーターの描画に使用されるカスタムテンプレートを設定できます。

<igx-tree>
    <igx-tree-node *ngFor="let node of data" [data]="node">
    </igx-tree-node>
    <ng-template igxTreeExpandIndicator let-expanded>
        <igx-icon>{{ expanded ? 'expand_less' : 'expand_more' }}</igx-icon>
    </ng-template>
</igx-tree>

Angular Tree の選択

igx-tree でノード選択を設定するには、その selection プロパティを設定する必要があります。このプロパティは、None、BiState、Cascading の 3 つのモードを受け入れます。以下で、それぞれについて詳しく説明します。

None

igx-tree では、デフォルトでノードの選択が無効になっています。ユーザーは UI 操作を介してノードを選択または選択解除することはできませんが、これらのアクションは提供された API メソッドを介して実行できます。

Bi-State

igx-tree で bi-state ノードの選択を有効にするには、selection プロパティを BiState に設定するだけです。これにより、すべてのノードのチェックボックスが表示されます。各ノードには、選択されているまたは選択されていないの 2 つの状態があります。このモードは複数選択をサポートします

<igx-tree selection="BiState">
</igx-tree>

カスケード

igx-tree でカスケードノードの選択を有効にするには、selection プロパティを Cascading に設定するだけです。これにより、すべてのノードのチェックボックスが表示されます。

<igx-tree selection="Cascading">
</igx-tree>

このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。

Angular Tree のチェックボックス

Angular Tree コンポーネントは、チェックボックスの組み込みサポートを提供し、ユーザーが複数の項目を選択できるようにします。

TreeView チェックボックスには、部分的に選択された親ノードにのみ適用可能な tri-state モードもあります。このモードでは、すべてではないが一部の子ノードがチェックされると、親ノードは不確定状態になります。

キーボードナビゲーション

IgxTree のキーボードナビゲーションは、ユーザーにさまざまなキーボード操作を提供します。この機能はデフォルトで有効になっており、ユーザーはノード間を移動できます。

IgxTree ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすいです。

キーの組み合わせ

下矢印 - 次に表示されているノードに移動します。ノードをアクティブとしてマークします。最後のノードの場合は何もしません。
Ctrl + 下矢印 - 次に表示されているノードに移動します。最後のノードの場合は何もしません。
上矢印 - 前に表示されていたノードに移動します。ノードをアクティブとしてマークします。最初のノードの場合は何もしません。
Ctrl + 上矢印 - 前に表示されていたノードに移動します。最初のノードの場合は何もしません。
左矢印 - 展開された親ノードの場合、ノードを縮小します。子ノードの場合、その親ノードに移動します。
右矢印 - 展開された親ノードの場合、ノードの最初の子に移動します。縮小された親ノードの場合は、それを展開します。
Home - 最初のノードに移動します。
End - 最後に表示されたノードに移動します。
Tab - ツリーの外側にあるページ上の次のフォーカス可能な要素に移動します。
Shift + Tab - ツリーの外側で、ページ上の前のフォーカス可能な要素に移動します。
Space - 現在のノードの選択を切り替えます。ノードをアクティブとしてマークします。
Shift + Space - 選択が有効になっている場合、Shift キーを押しながら、アクティブなノードと Space を押したノードの間ですべてのノードの選択を切り替えます。
Enter - フォーカスされたノードをアクティブにします。ノードにリンクがある場合は、リンクを開きます。
* - ノードとすべての兄弟ノードを同じレベルで展開します。

選択が有効になっている場合、エンドユーザーによるノードの選択は、描画されたチェックボックスを介してのみ許可されます。どちらの選択タイプでも複数選択できるため、次のマウスとキーボードの操作を利用できます。

クリック - ノードチェックボックスで実行すると、選択が有効になっている場合、にノードの選択を切り替えます。それ以外の場合は、ノードにフォーカスします。
Shift + クリック - ノードチェックボックスで実行すると、選択が有効になっている場合、Shift キーを押しながらアクティブなノードとクリックしたノードの間ですべてのノードの選択を切り替えます。

Angular Tree ロードオンデマンド

Ignite UI for Angular IgxTree は、サーバーから最小限のデータのみ取得して描画されるため、ユーザーにすばやくデータを表示できます。この動的データ読み込みアプローチでは、ユーザーがノードを展開した後にのみ、その特定の親ノードの子が取得されます。このメカニズムは、ロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。

デモ

ユーザーが展開アイコンをクリックすると、ロードアイコンに変わります。Loading プロパティが false に解決されると、読み込みインジケーターが消え、子が読み込まれます。

Angular Tree スタイル設定

Ignite UI for Angular テーマを使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマエンジンによって公開されている関数を使用するために、スタイルファイルに index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も単純なアプローチに従って、tree-theme を拡張し、変更したいパラメーターを渡す新しいテーマを作成します。

$custom-tree-theme: tree-theme(
    $background-selected: #ffe6cc,
    $background-active: #ecaa53,
    $background-active-selected: #ff8c1a
);

CSS 変数の使用

最後にコンポーネントのテーマを含めます。

:host {
    @include css-vars($custom-tree-theme);
}

テーマオーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントのスタイルを設定するには、CSS 変数がサポートされていないため、別のアプローチを使用する必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化に解除する必要があります。カスタムテーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        @include tree($custom-tree-theme);    
    }
}

既知の問題と制限

制限	説明
再帰的なテンプレートノード	`igx-tree` は、テンプレートを介した igx-tree-nodes の再帰的な作成をサポートしていません。詳細をご覧ください。すべてのノードを手動で宣言する必要があります。つまり、非常に深い階層を視覚化する場合は、テンプレートファイルのサイズに影響します。ツリーは、主にレイアウト/ナビゲーションコンポーネントとして使用することを目的としています。多数のレベルの深度と同種のデータを含む階層データソースを視覚化する必要がある場合は、IgxTreeGrid を使用できます。
古い ViewEngine (Ivy 以前) での IgxTreeNodes の使用	`enableIvy:false` が tsconfig.json に設定されている場合、Angular の View Engine (Ivy以前) にツリーが使用されないという問題があります。
FireFox のタブナビゲーション	ツリーにスクロールバーがある場合、キーボードナビゲーションを介してツリーにタブで移動すると、最初に igx-tree-node 要素にフォーカスされます。これは FireFox のデフォルトの動作ですが、ツリーに明示的な `tabIndex = -1` を設定することで解決できます。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。