ブランチが展開/折りたたみ時に使用するアニメーション設定を取得/設定します。
<igx-tree [animationSettings]="customAnimationSettings">
</igx-tree>
const animationSettings: ToggleAnimationSettings = {
openAnimation: growVerIn,
closeAnimation: growVerOut
};
this.tree.animationSettings = animationSettings;
ノードの展開インジケーターに使用されるカスタム テンプレート
<igx-tree>
<ng-template igxTreeExpandIndicator let-expanded>
<igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
</ng-template>
</igx-tree>
ノードが完了した後にノードが縮小されたときに発生されます。
ノードが縮小するときに終了する前に発生します。
<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
</igx-tree>
public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
const collapsedNode: IgxTreeNode<any> = event.node;
if (collapsedNode.alwaysOpen) {
event.cancel = true;
}
}
ノードが完了した後にノードが展開されたときに発生されます。
<igx-tree (nodeExpanded)="handleNodeExpanded($event)">
</igx-tree>
public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
const expandedNode: IgxTreeNode<any> = event.node;
console.log("Node is expanded: ", expandedNode.data);
}
ノードが展開するときに終了する前に発生します。
<igx-tree (nodeExpanding)="handleNodeExpanding($event)">
</igx-tree>
public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
const expandedNode: IgxTreeNode<any> = event.node;
if (expandedNode.disabled) {
event.cancel = true;
}
}
ノードの選択が操作によって変更されたときに発生されます。
<igx-tree (nodeSelection)="handleNodeSelection($event)">
</igx-tree>
public handleNodeSelection(event: ITreeNodeSelectionEvent) {
const newSelection: IgxTreeNode<any>[] = event.newSelection;
const added: IgxTreeNode<any>[] = event.added;
console.log("New selection will be: ", newSelection);
console.log("Added nodes: ", event.added);
}
ツリーがブランチ展開を処理する方法を取得または設定します。
true に設定すると、一度に展開できるブランチは 1 つのみで、その他のブランチはすべて縮小されます。
<igx-tree [singleBranchExpand]="true">
...
</igx-tree>
const tree: IgxTree = this.tree;
this.tree.singleBranchExpand = false;
コンポーネントのテーマを返します。
デフォルト テーマは comfortable です。
利用可能なオプションは comfortable、cosy、および compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
すべてのルート レベル ノードを返します。
const tree: IgxTree = this.tree;
const rootNodes: IgxTreeNodeComponent<any>[] = tree.rootNodes;
ツリー選択モードを取得または設定します。
ツリー選択モードを取得または設定します。
渡されたすべてのノードを縮小します。 渡されたノードがない場合、すべてのノードを縮小します。
縮小されるノード
const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.collapsible);
tree.collapseAll(nodes);
ノード コレクションが空の場合、すべてのノードの選択を解除します。それ以外の場合は、ノード コレクションのノードを選択解除します。
渡されたすべてのノードを展開します。 渡されたノードがない場合、すべてのノードを展開します。
展開するノード
const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.expandable);
tree.expandAll(nodes);
渡された searchTerm に一致するすべてのノードを返します。 ノードに対して検索語を評価するためのカスタム比較関数を受け入れます。
検索されたノードのデータ
渡された searchTerm をすべてのノードに対して評価するカスタム比較関数。
検索に一致するノードの配列。ノードが見つからない場合は null。
<igx-tree>
<igx-tree-node *ngFor="let node of data" [data]="node">
{{ node.label }}
</igx-tree-node>
</igx-tree>
public data: DataEntry[] = FETCHED_DATA;
...
const matchedNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(searchTerm: data[5]);
Using a custom comparer
public data: DataEntry[] = FETCHED_DATA;
...
const comparer: IgxTreeSearchResolver = (data: any, node: IgxTreeNode<DataEntry>) {
return node.data.index % 2 === 0;
}
const evenIndexNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(null, comparer);
アクティブなノードが変更されたときに発生します。