igniteui-angular

import * as i0 from '@angular/core'; import { QueryList, ElementRef, EventEmitter, TemplateRef, OnDestroy, OnInit, ChangeDetectorRef, AfterViewInit } from '@angular/core'; import { IBaseCancelableBrowserEventArgs, IBaseEventArgs, ITreeResourceStrings } from 'igniteui-angular/core'; import { ToggleAnimationSettings, ToggleAnimationPlayer } from 'igniteui-angular/expansion-panel'; import { Subject } from 'rxjs'; /** Comparer function that can be used when searching through IgxTreeNode<any>[] */ type IgxTreeSearchResolver = (data: any, node: IgxTreeNode<any>) => boolean; interface IgxTree { /** @hidden @internal */ nodes: QueryList<IgxTreeNode<any>>; /** @hidden @internal */ rootNodes: IgxTreeNode<any>[]; singleBranchExpand: boolean; toggleNodeOnClick: boolean; selection: IgxTreeSelectionType; expandIndicator: TemplateRef<any>; animationSettings: ToggleAnimationSettings; /** @hidden @internal */ forceSelect: IgxTreeNode<any>[]; /** @hidden @internal */ disabledChange: EventEmitter<IgxTreeNode<any>>; /** @hidden @internal */ activeNodeBindingChange: EventEmitter<IgxTreeNode<any>>; nodeSelection: EventEmitter<ITreeNodeSelectionEvent>; nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs>; nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs>; nodeCollapsing: EventEmitter<ITreeNodeTogglingEventArgs>; nodeCollapsed: EventEmitter<ITreeNodeToggledEventArgs>; activeNodeChanged: EventEmitter<IgxTreeNode<any>>; expandAll(nodes: IgxTreeNode<any>[]): void; collapseAll(nodes: IgxTreeNode<any>[]): void; deselectAll(node?: IgxTreeNode<any>[]): void; findNodes(searchTerm: any, comparer?: IgxTreeSearchResolver): IgxTreeNode<any>[] | null; } interface IgxTreeNode<T> { parentNode?: IgxTreeNode<any> | null; loading: boolean; path: IgxTreeNode<any>[]; expanded: boolean | null; /** @hidden @internal */ indeterminate: boolean; selected: boolean | null; disabled: boolean; /** @hidden @internal */ isFocused: boolean; active: boolean; level: number; data: T; /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ header: ElementRef; /** @hidden @internal */ tabIndex: number; /** @hidden @internal */ allChildren: QueryList<IgxTreeNode<any>>; /** @hidden @internal */ _children: QueryList<IgxTreeNode<any>> | null; selectedChange: EventEmitter<boolean>; expandedChange: EventEmitter<boolean>; expand(): void; collapse(): void; toggle(): void; /** @hidden @internal */ addLinkChild(node: any): void; /** @hidden @internal */ removeLinkChild(node: any): void; } interface ITreeNodeSelectionEvent extends IBaseCancelableBrowserEventArgs { oldSelection: IgxTreeNode<any>[]; newSelection: IgxTreeNode<any>[]; added: IgxTreeNode<any>[]; removed: IgxTreeNode<any>[]; event?: Event; } interface ITreeNodeEditingEvent extends IBaseCancelableBrowserEventArgs { node: IgxTreeNode<any>; value: string; } interface ITreeNodeEditedEvent extends IBaseEventArgs { node: IgxTreeNode<any>; value: any; } interface ITreeNodeTogglingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs { node: IgxTreeNode<any>; } interface ITreeNodeToggledEventArgs extends IBaseEventArgs { node: IgxTreeNode<any>; } declare const IgxTreeSelectionType: { readonly None: "None"; readonly BiState: "BiState"; readonly Cascading: "Cascading"; }; type IgxTreeSelectionType = (typeof IgxTreeSelectionType)[keyof typeof IgxTreeSelectionType]; /** @hidden @internal */ declare class IgxTreeNavigationService implements OnDestroy { private treeService; private selectionService; private tree; private _focusedNode; private _lastFocusedNode; private _activeNode; private _visibleChildren; private _invisibleChildren; private _disabledChildren; private _cacheChange; constructor(); register(tree: IgxTree): void; get focusedNode(): IgxTreeNode<any>; set focusedNode(value: IgxTreeNode<any>); get activeNode(): IgxTreeNode<any>; set activeNode(value: IgxTreeNode<any>); get visibleChildren(): IgxTreeNode<any>[]; update_disabled_cache(node: IgxTreeNode<any>): void; init_invisible_cache(): void; update_visible_cache(node: IgxTreeNode<any>, expanded: boolean, shouldEmit?: boolean): void; /** * Sets the node as focused (and active) * * @param node target node * @param isActive if true, sets the node as active */ setFocusedAndActiveNode(node: IgxTreeNode<any>, isActive?: boolean): void; /** Handler for keydown events. Used in tree.component.ts */ handleKeydown(event: KeyboardEvent): void; ngOnDestroy(): void; private handleNavigation; private handleArrowLeft; private handleArrowRight; private handleUpDownArrow; private handleAsterisk; private handleSpace; /** Gets the next visible node in the given direction - 1 -> next, -1 -> previous */ private getVisibleNode; static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeNavigationService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<IgxTreeNavigationService>; } /** @hidden @internal */ declare class IgxTreeSelectionService { private tree; private nodeSelection; private indeterminateNodes; private nodesToBeSelected; private nodesToBeIndeterminate; register(tree: IgxTree): void; /** Select range from last selected node to the current specified node. */ selectMultipleNodes(node: IgxTreeNode<any>, event?: Event): void; /** Select the specified node and emit event. */ selectNode(node: IgxTreeNode<any>, event?: Event): void; /** Deselect the specified node and emit event. */ deselectNode(node: IgxTreeNode<any>, event?: Event): void; /** Clears node selection */ clearNodesSelection(): void; isNodeSelected(node: IgxTreeNode<any>): boolean; isNodeIndeterminate(node: IgxTreeNode<any>): boolean; /** Select specified nodes. No event is emitted. */ selectNodesWithNoEvent(nodes: IgxTreeNode<any>[], clearPrevSelection?: boolean, shouldEmit?: boolean): void; /** Deselect specified nodes. No event is emitted. */ deselectNodesWithNoEvent(nodes?: IgxTreeNode<any>[], shouldEmit?: boolean): void; /** Called on `node.ngOnDestroy` to ensure state is correct after node is removed */ ensureStateOnNodeDelete(node: IgxTreeNode<any>): void; /** Retriggers a node's selection state */ private retriggerNodeState; /** Returns array of the selected nodes. */ private getSelectedNodes; /** Returns array of the nodes in indeterminate state. */ private getIndeterminateNodes; private emitNodeSelectionEvent; private areEqualCollections; private cascadeSelectNodesWithNoEvent; private cascadeDeselectNodesWithNoEvent; /** * populates the nodesToBeSelected and nodesToBeIndeterminate sets * with the nodes which will be eventually in selected/indeterminate state */ private calculateNodesNewSelectionState; /** Ensures proper selection state for all predescessors and descendants during a selection event */ private cascadeSelectionState; private emitCascadeNodeSelectionEvent; /** * recursively handle the selection state of the direct and indirect parents */ private handleParentSelectionState; /** * Handle the selection state of a given node based the selection states of its direct children */ private handleNodeSelectionState; /** * Get a collection of all nodes affected by the change event * * @param nodesToBeProcessed set of the nodes to be selected/deselected * @returns a collection of all affected nodes and all their parents */ private getCascadingNodeCollection; /** * retrieve the nodes which should be added/removed to/from the old selection */ private populateAddRemoveArgs; /** Emits the `selectedChange` event for each node affected by the selection */ private emitSelectedChangeEvent; static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeSelectionService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<IgxTreeSelectionService>; } /** @hidden @internal */ declare class IgxTreeService { expandedNodes: Set<IgxTreeNode<any>>; collapsingNodes: Set<IgxTreeNode<any>>; private tree; /** * Adds the node to the `expandedNodes` set and fires the nodes change event * * @param node target node * @param uiTrigger is the event triggered by a ui interraction (so we know if we should animate) * @returns void */ expand(node: IgxTreeNode<any>, uiTrigger?: boolean): void; /** * Adds a node to the `collapsing` collection * * @param node target node */ collapsing(node: IgxTreeNode<any>): void; /** * Removes the node from the 'expandedNodes' set and emits the node's change event * * @param node target node * @returns void */ collapse(node: IgxTreeNode<any>): void; isExpanded(node: IgxTreeNode<any>): boolean; register(tree: IgxTree): void; private siblingComparer; static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<IgxTreeService>; } /** * @hidden @internal * Used for links (`a` tags) in the body of an `igx-tree-node`. Handles aria and event dispatch. */ declare class IgxTreeNodeLinkDirective implements OnDestroy { private node; private navService; elementRef: ElementRef<any>; role: string; /** * The node's parent. Should be used only when the link is defined * in `<ng-template>` tag outside of its parent, as Angular DI will not properly provide a reference * * ```html * <igx-tree> * <igx-tree-node #myNode *ngFor="let node of data" [data]="node"> * <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: data, parentNode: myNode }"> * </ng-template> * </igx-tree-node> * ... *  * <ng-template #nodeTemplate let-data let-node="parentNode"> * <a [igxTreeNodeLink]="node">{{ data.label }}</a> * </ng-template> * </igx-tree> * ``` */ set parentNode(val: any); get parentNode(): any; /** A pointer to the parent node */ private get target(); private _parentNode; /** @hidden @internal */ get tabIndex(): number; /** * @hidden @internal * Clear the node's focused state */ handleBlur(): void; /** * @hidden @internal * Set the node as focused */ handleFocus(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeNodeLinkDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTreeNodeLinkDirective, "[igxTreeNodeLink]", never, { "parentNode": { "alias": "igxTreeNodeLink"; "required": false; }; }, {}, never, never, true, never>; } /** * * The tree node component represents a child node of the tree component or another tree node. * Usage: * * ```html * <igx-tree> * ... * <igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)"> * {{ data.FirstName }} {{ data.LastName }} * </igx-tree-node> * ... * </igx-tree> * ``` */ declare class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer implements IgxTreeNode<T>, OnInit, OnDestroy { tree: IgxTree; protected selectionService: IgxTreeSelectionService; protected treeService: IgxTreeService; protected navService: IgxTreeNavigationService; protected cdr: ChangeDetectorRef; private element; parentNode: IgxTreeNode<any>; /** * The data entry that the node is visualizing. * * @remarks * Required for searching through nodes. * * @example * ```html * <igx-tree> * ... * <igx-tree-node [data]="data"> * {{ data.FirstName }} {{ data.LastName }} * </igx-tree-node> * ... * </igx-tree> * ``` */ data: T; /** * To be used for load-on-demand scenarios in order to specify whether the node is loading data. * * @remarks * Loading nodes do not render children. */ loading: boolean; /** @hidden @internal */ set tabIndex(val: number); /** @hidden @internal */ get tabIndex(): number; /** @hidden @internal */ get animationSettings(): ToggleAnimationSettings; /** * Gets/Sets the resource strings. * * @remarks * Uses EN resources by default. */ set resourceStrings(value: ITreeResourceStrings); /** * An accessor that returns the resource strings. */ get resourceStrings(): ITreeResourceStrings; /** * Gets/Sets the active state of the node * * @param value: boolean */ set active(value: boolean); get active(): boolean; /** * Emitted when the node's `selected` property changes. * * ```html * <igx-tree> * <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected"> * </igx-tree-node> * </igx-tree> * ``` * * ```typescript * 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)) * ``` */ selectedChange: EventEmitter<boolean>; /** * Emitted when the node's `expanded` property changes. * * ```html * <igx-tree> * <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded"> * </igx-tree-node> * </igx-tree> * ``` * * ```typescript * 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)) * ``` */ expandedChange: EventEmitter<boolean>; /** @hidden @internal */ get focused(): boolean; /** * Retrieves the full path to the node incuding itself * * ```typescript * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * const path: IgxTreeNode<any>[] = node.path; * ``` */ get path(): IgxTreeNode<any>[]; /** * Gets/Sets the disabled state of the node * * @param value: boolean */ get disabled(): boolean; set disabled(value: boolean); /** @hidden @internal */ cssClass: string; /** @hidden @internal */ get role(): "treeitem" | "none"; /** @hidden @internal */ linkChildren: QueryList<ElementRef>; /** @hidden @internal */ _children: QueryList<IgxTreeNode<any>>; /** @hidden @internal */ allChildren: QueryList<IgxTreeNode<any>>; /** * Return the child nodes of the node (if any) * * @remarks * Returns `null` if node does not have children * * @example * ```typescript * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * const children: IgxTreeNode<any>[] = node.children; * ``` */ get children(): IgxTreeNode<any>[]; /** @hidden @internal */ header: ElementRef; private _defaultExpandIndicatorTemplate; private childrenContainer; private get hasLinkChildren(); /** @hidden @internal */ isFocused: boolean; /** @hidden @internal */ registeredChildren: IgxTreeNodeLinkDirective[]; /** @hidden @internal */ private _resourceStrings; private _tabIndex; private _disabled; /** * @hidden @internal */ get showSelectors(): boolean; /** * @hidden @internal */ get indeterminate(): boolean; /** The depth of the node, relative to the root * * ```html * <igx-tree> * ... * <igx-tree-node #node> * My level is {{ node.level }} * </igx-tree-node> * </igx-tree> * ``` * * ```typescript * const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0]; * const level: number = node.level; * ``` */ get level(): number; /** Get/set whether the node is selected. Supporst two-way binding. * * ```html * <igx-tree> * ... * <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected"> * {{ node.label }} * </igx-tree-node> * </igx-tree> * ``` * * ```typescript * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * const selected = node.selected; * node.selected = true; * ``` */ get selected(): boolean; set selected(val: boolean); /** Get/set whether the node is expanded * * ```html * <igx-tree> * ... * <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode"> * {{ node.label }} * </igx-tree-node> * </igx-tree> * ``` * * ```typescript * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * const expanded = node.expanded; * node.expanded = true; * ``` */ get expanded(): boolean; set expanded(val: boolean); /** @hidden @internal */ get expandIndicatorTemplate(): TemplateRef<any>; /** * The native DOM element representing the node. Could be null in certain environments. * * ```typescript * // get the nativeElement of the second node * const node: IgxTreeNode = this.tree.nodes.first(); * const nodeElement: HTMLElement = node.nativeElement; * ``` */ /** @hidden @internal */ get nativeElement(): HTMLElement; /** @hidden @internal */ ngOnInit(): void; /** * @hidden @internal * Sets the focus to the node's <a> child, if present * Sets the node as the tree service's focusedNode * Marks the node as the current active element */ handleFocus(): void; /** * @hidden @internal * Clear the node's focused status */ clearFocus(): void; /** * @hidden @internal */ onSelectorPointerDown(event: any): void; /** * @hidden @internal */ onSelectorClick(event: any): void; /** * Toggles the node expansion state, triggering animation * * ```html * <igx-tree> * <igx-tree-node #node>My Node</igx-tree-node> * </igx-tree> * <button type="button" igxButton (click)="node.toggle()">Toggle Node</button> * ``` * * ```typescript * const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * myNode.toggle(); * ``` */ toggle(): void; /** @hidden @internal */ indicatorClick(): void; /** * @hidden @internal */ onPointerDown(event: any): void; ngOnDestroy(): void; /** * Expands the node, triggering animation * * ```html * <igx-tree> * <igx-tree-node #node>My Node</igx-tree-node> * </igx-tree> * <button type="button" igxButton (click)="node.expand()">Expand Node</button> * ``` * * ```typescript * const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * myNode.expand(); * ``` */ expand(): void; /** * Collapses the node, triggering animation * * ```html * <igx-tree> * <igx-tree-node #node>My Node</igx-tree-node> * </igx-tree> * <button type="button" igxButton (click)="node.collapse()">Collapse Node</button> * ``` * * ```typescript * const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0]; * myNode.collapse(); * ``` */ collapse(): void; /** @hidden @internal */ addLinkChild(link: IgxTreeNodeLinkDirective): void; /** @hidden @internal */ removeLinkChild(link: IgxTreeNodeLinkDirective): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeNodeComponent<any>, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxTreeNodeComponent<any>, "igx-tree-node", never, { "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "selectedChange": "selectedChange"; "expandedChange": "expandedChange"; }, ["linkChildren", "_children", "allChildren"], ["igx-tree-node", "*"], true, never>; static ngAcceptInputType_loading: unknown; static ngAcceptInputType_active: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_selected: unknown; static ngAcceptInputType_expanded: unknown; } /** * @hidden @internal * Used for templating the expand indicator of the tree */ 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> * ``` */ declare class IgxTreeComponent implements IgxTree, OnInit, AfterViewInit, OnDestroy { private navService; private selectionService; private treeService; private element; private platform; 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(); /** @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; } declare const IGX_TREE_DIRECTIVES: readonly [typeof IgxTreeComponent, typeof IgxTreeNodeComponent, typeof IgxTreeNodeLinkDirective, typeof IgxTreeExpandIndicatorDirective]; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxTreeModule { static ɵfac: i0.ɵɵFactoryDeclaration<IgxTreeModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<IgxTreeModule, never, [typeof IgxTreeComponent, typeof IgxTreeNodeComponent, typeof IgxTreeNodeLinkDirective, typeof IgxTreeExpandIndicatorDirective], [typeof IgxTreeComponent, typeof IgxTreeNodeComponent, typeof IgxTreeNodeLinkDirective, typeof IgxTreeExpandIndicatorDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<IgxTreeModule>; } export { IGX_TREE_DIRECTIVES, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType }; export type { ITreeNodeEditedEvent, ITreeNodeEditingEvent, ITreeNodeSelectionEvent, ITreeNodeToggledEventArgs, ITreeNodeTogglingEventArgs, IgxTree, IgxTreeNode, IgxTreeSearchResolver };