Get all child nodes in Angular TreeView component

27 Aug 20258 minutes to read

This section demonstrates how to retrieve child nodes from a corresponding parent node ID in hierarchical data structures. The TreeView component provides the getNode method to access node details and traverse the tree structure programmatically. This functionality is essential for scenarios such as expanding specific branches, performing operations on node hierarchies, or implementing custom navigation patterns.

The getNode method returns detailed information about a specific node, including its child elements, which enables you to access and manipulate the entire subtree. This approach is particularly useful when working with dynamic data sources or when you need to implement custom tree traversal logic based on parent-child relationships.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule, TreeViewComponent } from '@syncfusion/ej2-angular-navigations'
import { Component, Inject, ViewChild } from '@angular/core';
/**
 * Treeview sample for getting child details via parent ID
 */
@Component({
    imports: [
        FormsModule, TreeViewModule
    ],
    standalone: true,
    selector: 'app-container',
    template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field' (created)='onCreate($event)' [loadOnDemand]=false></ejs-treeview></div><input type="text" class="e-input" id="Nodes" style="margin-left: 10px;margin-top:10px; width: 175px;" placeholder="Enter the parent ID( Ex: AS)" />
        <input type="button" class="btn btn-primary" value="Submit"id="btn" />`
})
export class AppComponent {

    // Data source for TreeView component
    public data: Object[] = [
        {
            code: "AF", name: "Africa", countries: [
                { code: "NGA", name: "Nigeria" },
                { code: "EGY", name: "Egypt" },
                { code: "ZAF", name: "South Africa" }
            ]
        },
        {
            code: "AS", name: "Asia", countries: [
                { code: "CHN", name: "China" },
                {
                    code: "IND", name: "India", countries: [
                        { code: "TN", name: "TamilNadu" }
                    ]
                },
                { code: "JPN", name: "Japan" }
            ]
        },
        {
            code: "EU", name: "Europe", countries: [
                { code: "DNK", name: "Denmark" },
                { code: "FIN", name: "Finland" },
                { code: "AUT", name: "Austria" }
            ]
        },
        {
            code: "NA", name: "North America", countries: [
                { code: "USA", name: "United States of America" },
                { code: "CUB", name: "Cuba" },
                { code: "MEX", name: "Mexico" }
            ]
        },
        {
            code: "SA", name: "South America", countries: [
                { code: "BR", name: "Brazil" },
                { code: "COL", name: "Colombia" },
                { code: "ARG", name: "Argentina" }
            ]
        },
    ];

    public field: Object = { dataSource: this.data, id: 'code', text: 'name', child: 'countries' };

    @ViewChild('treevalidate')
    public tree?: TreeViewComponent;

    public onCreate(args: any): void {
        let proxy = this.tree as TreeViewComponent;
        (document.getElementById("btn") as HTMLElement).addEventListener("click", (event) => {
            let id = (document.getElementById('Nodes') as HTMLElement | any).value
            let element = proxy?.element.querySelector('[data-uid="' + id + '"]');
            // Gets the child Element
            if (element != null) {
                let liElements = element.querySelectorAll('ul li');
                let arr = [];
                for (let i = 0; i < (liElements as NodeListOf<Element>).length; i++) {
                    let nodeData = proxy?.getNode((liElements as NodeListOf<Element>)[i]);
                    arr.push(nodeData);
                }
                alert(JSON.stringify(arr));
            }
        });
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));