constructor

• new IgxTreeNodeComponent<T>(tree, selectionService, treeService, navService, cdr, animationService, element, parentNode): IgxTreeNodeComponent<T>

• 型パラメーター

  Type Parameters

  • T

  パラメーター

  • tree: IgxTree

  • selectionService: IgxTreeSelectionService

  • treeService: IgxTreeService

  • navService: IgxTreeNavigationService

  • cdr: ChangeDetectorRef

  • animationService: AnimationService

  • element: ElementRef<HTMLElement>

  • parentNode: IgxTreeNode<any>

  返却 IgxTreeNodeComponent<T>

data

 <igx-tree>
 ...
   <igx-tree-node [data]="data">
     {{ data.FirstName }} {{ data.LastName }}
   </igx-tree-node>
 ...
 </igx-tree>
Copy

expandedChange

<igx-tree>
     <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
     </igx-tree-node>
</igx-tree>
Copy

const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
Copy

loading

parentNode

selectedChange

<igx-tree>
     <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
     </igx-tree-node>
</igx-tree>
Copy

const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
Copy

tree

active

• get active(): boolean

• 返却 boolean

• set active(value): void

• ノードのアクティブ状態を取得または設定します。

  パラメーター

  • value: boolean

  返却 void

children

• get children(): IgxTreeNode<any>[]

• ノードの子ノードを返します (存在する場合)。

  備考

  ノードに子がない場合は null を返します。

  例

  const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  const children: IgxTreeNode<any>[] = node.children;
  Copy

  返却 IgxTreeNode<any>[]

disabled

• get disabled(): boolean

• ノードの無効状態を取得または設定します。

  返却 boolean

• set disabled(value): void

• パラメーター

  • value: boolean

  返却 void

expanded

• get expanded(): boolean

• ノードが展開されているかどうかを取得または設定します。

  <igx-tree>
   ...
   <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
       {{ node.label }}
   </igx-tree-node>
  </igx-tree>
  Copy

  const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  const expanded = node.expanded;
  node.expanded = true;
  Copy

  返却 boolean

• set expanded(val): void

• パラメーター

  • val: boolean

  返却 void

level

• get level(): number

• ルートに対するノードの深さ。

  <igx-tree>
   ...
   <igx-tree-node #node>
       My level is {{ node.level }}
   </igx-tree-node>
  </igx-tree>
  Copy

  const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0];
  const level: number = node.level;
  Copy

  返却 number

path

• get path(): IgxTreeNode<any>[]

• 自身を含むノードへのフル パスを取得します。

  const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  const path: IgxTreeNode<any>[] = node.path;
  Copy

  返却 IgxTreeNode<any>[]

resourceStrings

• get resourceStrings(): ITreeResourceStrings

• リソース文字列を返すアクセサーです。

  返却 ITreeResourceStrings

• set resourceStrings(value): void

• リソース文字列を取得または設定します。

  備考

  デフォルトで EN リソースを使用します。

  パラメーター

  • value: ITreeResourceStrings

  返却 void

selected

• get selected(): boolean

• ノードが選択されているかどうかを取得または設定します。双方向バインディングをサポートします。

  <igx-tree>
   ...
   <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
       {{ node.label }}
   </igx-tree-node>
  </igx-tree>
  Copy

  const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  const selected = node.selected;
  node.selected = true;
  Copy

  返却 boolean

• set selected(val): void

• パラメーター

  • val: boolean

  返却 void

size

• get size(): string

• 返却 string

collapse

• collapse(): void

• ノードを縮小し、アニメーションをトリガーします。

  <igx-tree>
       <igx-tree-node #node>My Node</igx-tree-node>
  </igx-tree>
  <button type="button" igxButton (click)="node.collapse()">Collapse Node</button>
  Copy

  const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  myNode.collapse();
  Copy

  返却 void

expand

• expand(): void

• ノードを展開し、アニメーションをトリガーします。

  <igx-tree>
       <igx-tree-node #node>My Node</igx-tree-node>
  </igx-tree>
  <button type="button" igxButton (click)="node.expand()">Expand Node</button>
  Copy

  const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  myNode.expand();
  Copy

  返却 void

ngOnDestroy

• ngOnDestroy(): void

• 返却 void

toggle

• toggle(): void

• ノードの展開状態を切り替え、アニメーションをトリガーします。

  <igx-tree>
       <igx-tree-node #node>My Node</igx-tree-node>
  </igx-tree>
  <button type="button" igxButton (click)="node.toggle()">Toggle Node</button>
  Copy

  const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  myNode.toggle();
  Copy

  返却 void