Descripción general de los componentes del árbol Angular

El componente de árbol Angular permite a los usuarios representar datos jerárquicos en una estructura de vista de árbol con relaciones padre-hijo, así como definir una estructura de vista de árbol estática sin un modelo de datos correspondiente. Su objetivo principal es permitir a los usuarios finales visualizar y navegar dentro de estructuras de datos jerárquicas. La Ignite UI for Angular Tree también proporciona capacidades de carga bajo demanda, activación de elementos, selección de elementos en cascada de dos y tres estados a través de casillas de verificación integradas, navegación con teclado integrado y más.

Angular Tree Example

En este ejemplo básico Angular Tree, puede ver cómo definir un igx-tree y sus nodos especificando la jerarquía de nodos e iterando a través de un conjunto de datos jerárquico.

Getting Started with Ignite UI for Angular Tree

Para comenzar con el componente Ignite UI for Angular Tree, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxTreeModule en su archivo app.module.

// app.module.ts

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

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

Alternativamente, a partir de 16.0.0, puede importar IgxTreeComponent como una dependencia independiente o usar el token IGX_TREE_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// 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 {}

Ahora que hemos importado el módulo o las directivas Ignite UI for Angular Tree, comencemos con una configuración básica del igx-tree y sus nodos.

Using the Angular Tree

IgxTreeNodesComponent es la representación de cada nodo que pertenece a IgxTreeComponent.
Los nodos proporcionan propiedades deshabilitadas, activas, seleccionadas y expandidas, que le brindan la oportunidad de configurar los estados del nodo según sus requisitos. La propiedad de datos se puede utilizar para agregar una referencia a la entrada de datos que representa el nodo. Se requiere vincular [data] para buscar a través de nodos usando IgxTreeComponent.findNodes().

Declaring a tree

Los nodos se pueden declarar utilizando uno de los siguientes enfoques.

Declarar el árbol y sus nodos especificando la jerarquía de nodos e iterando a través de un conjunto de datos

<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>

Los nodos se pueden vincular a un modelo de datos para que sus estados expandidos y seleccionados también se reflejen en los datos subyacentes.

<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>

Declarar un árbol creando nodos independientes estáticos

Para representar un árbol no es necesario necesariamente un conjunto de datos: se pueden crear nodos individuales sin un modelo de datos subyacente:

<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>

Nodes with links

Cuando un nodo debe representar un enlace, la directiva IgxTreeNodeLink debe agregarse a la etiqueta <a>. Esto garantizará que se asigne la función aria adecuada a los elementos DOM del nodo.

<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>

Node Interactions

IgxTreeNodeComponent podría expandirse o contraerse:

Al hacer clic en el nodo, expanda el indicador (comportamiento predeterminado).
haciendo clic en el nodo si la igx-tree propiedad toggleNodeOnClick está establecida en 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>

De forma predeterminada, se pueden expandir varios nodos al mismo tiempo. Para cambiar este comportamiento y permitir la expansión de una sola rama a la vez, se podría habilitar la propiedad singleBranchExpand. De esta manera, cuando se expande un nodo, se contraerán todas las demás ramas ya expandidas en el mismo nivel.

<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>

Además, IgxTree proporciona los siguientes métodos de API para las interacciones de nodos:

expandir: expande el nodo con animación.
colapso: colapsa el nodo con animación.
alternar: alterna el estado de expansión del nodo con animación.
colapsoTodo: colapsa los nodos especificados con animación. Si no se pasa ningún nodo, colapsa todos los nodos principales.
expandAll: establece los nodos especificados como expandidos con animación. Si no se pasa ningún nodo, expande todos los nodos principales.
deselectAll: anula la selección de todos los nodos. Si se pasa una matriz de nodos, anula la selección solo de los nodos especificados. No emite el evento nodeSelection.

Finding Nodes

Puede encontrar un nodo específico dentro de un IgxTree utilizando el método findNodes. Devuelve una matriz de nodos que coinciden con los datos especificados. Al buscar nodos en escenarios de estructura de datos más complejos, como claves primarias compuestas, puede pasar una función de comparación personalizada para especificar los criterios para buscar nodos en función de los datos.

<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);
  }
}

Templating

Para crear una plantilla reutilizable para sus nodos, declare <ng-template> dentro de igx-tree.

<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>

Además, al utilizar la entrada expandIndicator, tiene la capacidad de configurar una plantilla personalizada que se utilizará para representar los indicadores de expansión/contraer de los nodos.

<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 Selection

Para configurar la selección de nodos en el igx-tree, solo necesita configurar su propiedad de selección. Esta propiedad acepta los tres modos siguientes: Ninguno, BiState y Cascading. A continuación veremos cada uno de ellos con más detalle.

None

En el igx-tree la selección de nodos predeterminada está deshabilitada. Los usuarios no pueden seleccionar ni anular la selección de un nodo mediante la interacción de la interfaz de usuario, pero estas acciones aún se pueden completar mediante el método API proporcionado.

Bi-State

Para habilitar la selección de nodos biestados en el igx-tree simplemente establezca la propiedad de selección en BiState. Esto mostrará una casilla de verificación para cada nodo. Cada nodo tiene dos estados: seleccionado o no. Este modo admite selección múltiple.

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

Cascading

Para habilitar la selección de nodos en cascada en el igx-tree, simplemente establezca la propiedad de selección en Cascading. Esto mostrará una casilla de verificación para cada nodo.

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

En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos. Cuando un padre tiene algunos hijos seleccionados y algunos no seleccionados, su casilla de verificación está en un estado indeterminado.

Angular Tree Checkbox

El componente Angular Tree proporciona soporte integrado para casillas de verificación, lo que permite a los usuarios seleccionar más de un elemento.

Las casillas de verificación de TreeView también tienen un modo de tres estados, que se aplica solo a los nodos principales parcialmente seleccionados. En este modo, un nodo principal pasará al estado indeterminado cuando se marquen algunos, pero no todos, los nodos secundarios.

La navegación con el teclado en IgxTree proporciona una rica variedad de interacciones con el teclado para el usuario. Esta funcionalidad está habilitada de forma predeterminada y permite a los usuarios navegar a través de los nodos.

La navegación IgxTree cumple con los estándares de accesibilidad W3C y es fácil de usar.

Combinaciones de teclas

Flecha hacia abajo: navega al siguiente nodo visible. Marca el nodo como activo. No hace nada si está en el ÚLTIMO nodo
Ctrl + Flecha hacia abajo: navega al siguiente nodo visible. No hace nada si está en el ÚLTIMO nodo
Flecha hacia arriba: navega al nodo visible anterior. Marca el nodo como activo. No hace nada si está en el PRIMER nodo
Ctrl + Flecha arriba: navega al nodo visible anterior. No hace nada si está en el PRIMER nodo
Flecha izquierda: en un nodo principal expandido, lo contrae. Si está en un nodo secundario, se mueve a su nodo principal.
Flecha hacia la derecha: en un nodo principal expandido, navega hasta el primer hijo del nodo. Si se encuentra en un nodo principal colapsado, lo expande.
Inicio: navega al PRIMER nodo
Fin: navega hasta el ÚLTIMO nodo visible
Pestaña: navega al siguiente elemento enfocable en la página, fuera del árbol
Shift + Tab: navega al elemento enfocable anterior en la página, fuera del árbol
Espacio: alterna la selección del nodo actual. Marca el nodo como activo.
Mayús + Espacio: alterna la selección de todos los nodos entre el activo y el que se presionó Espacio mientras se mantiene presionada la tecla Mayús si la selección está habilitada.
Enter: activa el nodo enfocado. Si el nodo tiene un enlace, abra el enlace.
*- expande el nodo y todos los nodos hermanos en el mismo nivel

Cuando la selección está habilitada, la selección de nodos por parte del usuario final solo se permite a través de la casilla de verificación representada. Dado que ambos tipos de selección permiten selección múltiple, están disponibles las siguientes interacciones mouse + teclado:

Hacer clic: cuando se realiza en la casilla de verificación del nodo, alterna la selección del nodo si la selección está habilitada. De lo contrario, enfoca el nodo.
Mayús + clic: cuando se realiza en la casilla de verificación del nodo, alterna la selección de todos los nodos entre el activo y el que se hizo clic mientras se mantiene presionada la tecla Mayús si la selección está habilitada.

Angular Tree Load On Demand

La Ignite UI for Angular IgxTree se puede representar de tal manera que requiera recuperar la cantidad mínima de datos del servidor para que el usuario pueda verlos lo más rápido posible. Con este enfoque de carga dinámica de datos, solo después de que el usuario expanda un nodo, se recuperarán los hijos de ese nodo principal en particular. Este mecanismo, también conocido como Carga bajo demanda, se puede configurar fácilmente para funcionar con cualquier dato remoto.

Demo

Después de que el usuario hace clic en el icono de expansión, se reemplaza por un indicador de carga. Cuando la propiedad de carga se resuelve en false, el indicador de carga desaparece y se cargan los elementos secundarios.

Angular Tree Styling

Usando la Ignite UI for Angular Theming, podemos alterar en gran medida la apariencia del árbol. Primero, para que podamos utilizar las funciones expuestas por el motor de temas, necesitamos importar el archivo index en nuestro archivo de estilo:

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el tema del árbol y pasamos los parámetros que nos gustaría cambiar:

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

Using CSS Variables

El último paso es incluir el tema del componente.

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

Using Theme Overrides

Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que allí no se admiten variables CSS.

Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

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

Known Issues and Limitations

Limitación	Descripción
Nodos de plantilla recursivos	El`igx-tree` no admite la creación recursiva de nodos de árbol igx mediante plantilla. Obtenga más información. Todos los nodos deben declararse manualmente, lo que significa que si desea visualizar una jerarquía muy profunda, esto afectaría el tamaño de su archivo de plantilla. El árbol está destinado a ser utilizado principalmente como componente de diseño/navegación. Si es necesario visualizar una fuente de datos jerárquica con numerosos niveles de profundidad y datos homogéneos, puede utilizar IgxTreeGrid
Usando IgxTreeNodes con el antiguo View Engine (anterior a Ivy)	Hay un problema en View Engine de Angular (anterior a Ivy) que impide que se utilice el árbol cuando`enableIvy: false` está configurado en tsconfig.json
Navegación por pestañas en Firefox	Al acceder al árbol mediante la navegación con el teclado, cuando el árbol tiene una barra de desplazamiento, primero se enfocará el elemento igx-tree-node. Este es el comportamiento predeterminado en FireFox, sin embargo, se puede resolver poniendo un comando explícito`tabIndex = -1` en el árbol.

API References

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.