igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
339 lines (338 loc) • 12.4 kB
TypeScript
import { QueryList, EventEmitter, TemplateRef, OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
import { Subject } from 'rxjs';
import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
import { IgxTreeSelectionType, IgxTree, ITreeNodeToggledEventArgs, ITreeNodeTogglingEventArgs, ITreeNodeSelectionEvent, IgxTreeNode, IgxTreeSearchResolver } from './common';
import { IgxTreeNavigationService } from './tree-navigation.service';
import { IgxTreeNodeComponent } from './tree-node/tree-node.component';
import { IgxTreeSelectionService } from './tree-selection.service';
import { IgxTreeService } from './tree.service';
import * as i0 from "@angular/core";
/**
* @hidden @internal
* Used for templating the select marker of the tree
*/
export declare class IgxTreeSelectMarkerDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeSelectMarkerDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTreeSelectMarkerDirective, "[igxTreeSelectMarker]", never, {}, {}, never, never, true, never>;
}
/**
* @hidden @internal
* Used for templating the expand indicator of the tree
*/
export declare class IgxTreeExpandIndicatorDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeExpandIndicatorDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTreeExpandIndicatorDirective, "[igxTreeExpandIndicator]", never, {}, {}, never, never, true, never>;
}
/**
* IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion.
*
* @igxModule IgxTreeModule
* @igxKeywords tree
* @igxTheme igx-tree-theme
* @igxGroup Grids & Lists
*
* @remark
* The Angular Tree Component allows users to represent hierarchical data in a tree-view structure,
* maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.
* Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures.
* The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation,
* bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more.
*
* @example
* ```html
* <igx-tree>
* <igx-tree-node>
* I am a parent node 1
* <igx-tree-node>
* I am a child node 1
* </igx-tree-node>
* ...
* </igx-tree-node>
* ...
* </igx-tree>
* ```
*/
export declare class IgxTreeComponent implements IgxTree, OnInit, AfterViewInit, OnDestroy {
private navService;
private selectionService;
private treeService;
private element;
cssClass: string;
/**
* Gets/Sets tree selection mode
*
* @remarks
* By default the tree selection mode is 'None'
* @param selectionMode: IgxTreeSelectionType
*/
get selection(): IgxTreeSelectionType;
set selection(selectionMode: IgxTreeSelectionType);
/** Get/Set how the tree should handle branch expansion.
* If set to `true`, only a single branch can be expanded at a time, collapsing all others
*
* ```html
* <igx-tree [singleBranchExpand]="true">
* ...
* </igx-tree>
* ```
*
* ```typescript
* const tree: IgxTree = this.tree;
* this.tree.singleBranchExpand = false;
* ```
*/
singleBranchExpand: boolean;
/** Get/Set if nodes should be expanded/collapsed when clicking over them.
*
* ```html
* <igx-tree [toggleNodeOnClick]="true">
* ...
* </igx-tree>
* ```
*
* ```typescript
* const tree: IgxTree = this.tree;
* this.tree.toggleNodeOnClick = false;
* ```
*/
toggleNodeOnClick: boolean;
/** Get/Set the animation settings that branches should use when expanding/collpasing.
*
* ```html
* <igx-tree [animationSettings]="customAnimationSettings">
* </igx-tree>
* ```
*
* ```typescript
* const animationSettings: ToggleAnimationSettings = {
* openAnimation: growVerIn,
* closeAnimation: growVerOut
* };
*
* this.tree.animationSettings = animationSettings;
* ```
*/
animationSettings: ToggleAnimationSettings;
/** Emitted when the node selection is changed through interaction
*
* ```html
* <igx-tree (nodeSelection)="handleNodeSelection($event)">
* </igx-tree>
* ```
*
*```typescript
* 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);
* }
*```
*/
nodeSelection: EventEmitter<ITreeNodeSelectionEvent>;
/** Emitted when a node is expanding, before it finishes
*
* ```html
* <igx-tree (nodeExpanding)="handleNodeExpanding($event)">
* </igx-tree>
* ```
*
*```typescript
* public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
* const expandedNode: IgxTreeNode<any> = event.node;
* if (expandedNode.disabled) {
* event.cancel = true;
* }
* }
*```
*/
nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs>;
/** Emitted when a node is expanded, after it finishes
*
* ```html
* <igx-tree (nodeExpanded)="handleNodeExpanded($event)">
* </igx-tree>
* ```
*
*```typescript
* public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
* const expandedNode: IgxTreeNode<any> = event.node;
* console.log("Node is expanded: ", expandedNode.data);
* }
*```
*/
nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs>;
/** Emitted when a node is collapsing, before it finishes
*
* ```html
* <igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
* </igx-tree>
* ```
*
*```typescript
* public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
* const collapsedNode: IgxTreeNode<any> = event.node;
* if (collapsedNode.alwaysOpen) {
* event.cancel = true;
* }
* }
*```
*/
nodeCollapsing: EventEmitter<ITreeNodeTogglingEventArgs>;
/** Emitted when a node is collapsed, after it finishes
*
* @example
* ```html
* <igx-tree (nodeCollapsed)="handleNodeCollapsed($event)">
* </igx-tree>
* ```
* ```typescript
* public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) {
* const collapsedNode: IgxTreeNode<any> = event.node;
* console.log("Node is collapsed: ", collapsedNode.data);
* }
* ```
*/
nodeCollapsed: EventEmitter<ITreeNodeToggledEventArgs>;
/**
* Emitted when the active node is changed.
*
* @example
* ```
* <igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree>
* ```
*/
activeNodeChanged: EventEmitter<IgxTreeNode<any>>;
/**
* A custom template to be used for the expand indicator of nodes
* ```html
* <igx-tree>
* <ng-template igxTreeExpandIndicator let-expanded>
* <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
* </ng-template>
* </igx-tree>
* ```
*/
expandIndicator: TemplateRef<any>;
/** @hidden @internal */
nodes: QueryList<IgxTreeNodeComponent<any>>;
/** @hidden @internal */
disabledChange: EventEmitter<IgxTreeNode<any>>;
/**
* Returns all **root level** nodes
*
* ```typescript
* const tree: IgxTree = this.tree;
* const rootNodes: IgxTreeNodeComponent<any>[] = tree.rootNodes;
* ```
*/
get rootNodes(): IgxTreeNodeComponent<any>[];
/**
* Emitted when the active node is set through API
*
* @hidden @internal
*/
activeNodeBindingChange: EventEmitter<IgxTreeNode<any>>;
/** @hidden @internal */
forceSelect: any[];
/** @hidden @internal */
resizeNotify: Subject<void>;
private _selection;
private destroy$;
private unsubChildren$;
constructor(navService: IgxTreeNavigationService, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, element: ElementRef<HTMLElement>);
/** @hidden @internal */
get nativeElement(): HTMLElement;
/**
* Expands all of the passed nodes.
* If no nodes are passed, expands ALL nodes
*
* @param nodes nodes to be expanded
*
* ```typescript
* const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.expandable);
* tree.expandAll(nodes);
* ```
*/
expandAll(nodes?: IgxTreeNode<any>[]): void;
/**
* Collapses all of the passed nodes.
* If no nodes are passed, collapses ALL nodes
*
* @param nodes nodes to be collapsed
*
* ```typescript
* const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.collapsible);
* tree.collapseAll(nodes);
* ```
*/
collapseAll(nodes?: IgxTreeNode<any>[]): void;
/**
* Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection.
*
* @example
* ```typescript
* const arr = [
* this.tree.nodes.toArray()[0],
* this.tree.nodes.toArray()[1]
* ];
* this.tree.deselectAll(arr);
* ```
* @param nodes: IgxTreeNodeComponent<any>[]
*/
deselectAll(nodes?: IgxTreeNodeComponent<any>[]): void;
/**
* Returns all of the nodes that match the passed searchTerm.
* Accepts a custom comparer function for evaluating the search term against the nodes.
*
* @remarks
* Default search compares the passed `searchTerm` against the node's `data` Input.
* When using `findNodes` w/o a `comparer`, make sure all nodes have `data` passed.
*
* @param searchTerm The data of the searched node
* @param comparer A custom comparer function that evaluates the passed `searchTerm` against all nodes.
* @returns Array of nodes that match the search. `null` if no nodes are found.
*
* ```html
* <igx-tree>
* <igx-tree-node *ngFor="let node of data" [data]="node">
* {{ node.label }}
* </igx-tree-node>
* </igx-tree>
* ```
*
* ```typescript
* public data: DataEntry[] = FETCHED_DATA;
* ...
* const matchedNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(searchTerm: data[5]);
* ```
*
* Using a custom comparer
* ```typescript
* 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);
* ```
*/
findNodes(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNodeComponent<any>[] | null;
/** @hidden @internal */
handleKeydown(event: KeyboardEvent): void;
/** @hidden @internal */
ngOnInit(): void;
/** @hidden @internal */
ngAfterViewInit(): void;
/** @hidden @internal */
ngOnDestroy(): void;
private expandToNode;
private subToCollapsing;
private subToChanges;
private scrollNodeIntoView;
private _comparer;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxTreeComponent, "igx-tree", never, { "selection": { "alias": "selection"; "required": false; }; "singleBranchExpand": { "alias": "singleBranchExpand"; "required": false; }; "toggleNodeOnClick": { "alias": "toggleNodeOnClick"; "required": false; }; "animationSettings": { "alias": "animationSettings"; "required": false; }; }, { "nodeSelection": "nodeSelection"; "nodeExpanding": "nodeExpanding"; "nodeExpanded": "nodeExpanded"; "nodeCollapsing": "nodeCollapsing"; "nodeCollapsed": "nodeCollapsed"; "activeNodeChanged": "activeNodeChanged"; }, ["expandIndicator", "nodes"], ["igx-tree-node"], true, never>;
static ngAcceptInputType_singleBranchExpand: unknown;
static ngAcceptInputType_toggleNodeOnClick: unknown;
}