JavaScriptJavaScriptAngularAngularVueVueReactReact

Angular Tree - Setup

Smart UI for Angular supports both standalone components (bootstrapApplication) and NgModule-based apps (bootstrapModule(AppModule)). Steps 1-5 show the standalone path; the section below shows the NgModule path with the same package and styles.

Demo source (Smart UI repo): angular/src/tree/overview

1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import TreeModule from smart-webcomponents-angular/tree: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { TreeModule } from 'smart-webcomponents-angular/tree';

4 Root component (standalone)

Add TreeModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TreeComponent } from 'smart-webcomponents-angular/tree';

import { TreeModule } from 'smart-webcomponents-angular/tree';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ TreeModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App implements AfterViewInit, OnInit {	
	@ViewChild('tree', { read: TreeComponent, static: false }) tree!: TreeComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    

	}	
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-tree as needed:

 <smart-tree #tree id="tree">
    <smart-tree-items-group> <i class="material-icons">&#xE53F;</i> Attractions
        <smart-tree-item>Movies</smart-tree-item>
        <smart-tree-item>Circus</smart-tree-item>
        <smart-tree-item>Concerts</smart-tree-item>
        <smart-tree-item>Monuments</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE56C;</i> Dining
        <smart-tree-item>Restaurants</smart-tree-item>
        <smart-tree-item>Caf&eacute;s</smart-tree-item>
        <smart-tree-item>Bars</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE80C;</i> Education
        <smart-tree-item>Schools</smart-tree-item>
        <smart-tree-item>Colleges</smart-tree-item>
        <smart-tree-item>Universities</smart-tree-item>
        <smart-tree-item>Educational courses</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xEB41;</i> Family
        <smart-tree-item>Babysitting</smart-tree-item>
        <smart-tree-item>Family trips</smart-tree-item>
        <smart-tree-item>Theme parks</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE87D;</i> Health
        <smart-tree-item>Hospitals</smart-tree-item>
        <smart-tree-item>Family physicians</smart-tree-item>
        <smart-tree-item>Optics</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE30A;</i> Office
        <smart-tree-item>Offices for rent</smart-tree-item>
        <smart-tree-item>Office equipment</smart-tree-item>
        <smart-tree-item>Repair works</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE25C;</i> Promotions
        <smart-tree-item>Sales</smart-tree-item>
        <smart-tree-item>Malls</smart-tree-item>
        <smart-tree-item>Collective buying</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE03E;</i> Radio
        <smart-tree-item>Available stations</smart-tree-item>
        <smart-tree-item>Search</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE7E9;</i> Recipes
        <smart-tree-item>With meat</smart-tree-item>
        <smart-tree-item>With fish</smart-tree-item>
        <smart-tree-item>Vegetarian recipes</smart-tree-item>
        <smart-tree-item>Vegan recipes</smart-tree-item>
        <smart-tree-item>Desserts</smart-tree-item>
        <smart-tree-item>Chef's recommendations</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE52F;</i> Sports
        <smart-tree-item>Football</smart-tree-item>
        <smart-tree-item>Basketball</smart-tree-item>
        <smart-tree-item>Tennis</smart-tree-item>
        <smart-tree-item>Baseball</smart-tree-item>
        <smart-tree-item>Cycling</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group> <i class="material-icons">&#xE53D;</i> Travel
        <smart-tree-item>Local destinations</smart-tree-item>
        <smart-tree-item>Book tickets</smart-tree-item>
        <smart-tree-item>Organised travel</smart-tree-item>
    </smart-tree-items-group>
</smart-tree>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put TreeModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put TreeModule from smart-webcomponents-angular/tree on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeModule } from 'smart-webcomponents-angular/tree';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, TreeModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.

Run

ng serve or npm start - then open http://localhost:4200/.

Smart UI for Angular - full documentation

Common Use Cases

  • Load hierarchical data

    Populate tree with nested items

    tree.dataSource = [{
  label: 'Parent',
  items: [
    { label: 'Child 1' },
    { label: 'Child 2' }
  ]
}];
  • Expand/collapse nodes

    Programmatically control node state

    tree.expandItem('0'); // Expand first item
tree.collapseItem('0'); // Collapse it
  • Handle selection

    Respond to tree item selection

    tree.addEventListener('change', (e) => {
  console.log('Selected:', e.detail.value);
});

Troubleshooting

How do I load tree data lazily?
Set items to a function that returns a Promise, or use the expanding event to load child nodes on demand.
How do I enable drag and drop?
Set allowDrag = true and allowDrop = true to enable drag-and-drop reordering.

Accessibility

The Tree component follows WAI-ARIA best practices:

  • Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
  • ARIA roles - Appropriate roles and labels are applied automatically
  • Focus management - Visible focus indicators for keyboard users
  • Screen readers - State changes are announced to assistive technology
  • High contrast - Supports Windows High Contrast Mode and forced colors

For custom labeling, set aria-label or aria-labelledby attributes on the component.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.