Angular Tree View - Plain Data Structure

The TreeView's plain (one-dimensional) array contains items each of which references its parent item.

Backend API

<div class="form"> <dx-tree-view id="simple-treeview" [items]="products" dataStructure="plain" parentIdExpr="categoryId" keyExpr="ID" displayExpr="name" [width]="300" (onItemClick)="selectItem($event)" ></dx-tree-view> @if (currentItem.price) { <div id="product-details"> <img alt="{{ currentItem.name }}" [src]="currentItem.icon" /> <div class="name">{{ currentItem.name }}</div> <div class="price">{{ "$" + currentItem.price }}</div> </div> } </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxTreeViewModule, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view'; import { Product, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxTreeViewModule, ], }) export class AppComponent { products: Product[]; currentItem: Product; constructor(service: Service) { this.products = service.getProducts(); this.currentItem = this.products[0]; } selectItem(e: DxTreeViewTypes.ItemClickEvent<Product>) { this.currentItem = e.itemData; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #simple-treeview, #product-details { display: inline-block; } ::ng-deep #product-details { vertical-align: top; width: 400px; height: 420px; margin-left: 20px; } ::ng-deep #product-details > img { border: none; height: 300px; width: 400px; } ::ng-deep #product-details > .name { text-align: center; font-size: 20px; } ::ng-deep #product-details > .price { text-align: center; font-size: 24px; } ::ng-deep .dark #product-details > div { color: #f0f0f0; } ::ng-deep .hidden { visibility: hidden; }

import { Injectable } from '@angular/core'; export class Product { ID: string; name: string; expanded?: boolean; categoryId?: string; icon?: string; price?: number; } const products: Product[] = [ { ID: '1', name: 'Stores', expanded: true, }, { ID: '1_1', categoryId: '1', name: 'Super Mart of the West', expanded: true, }, { ID: '1_1_1', categoryId: '1_1', name: 'Video Players', }, { ID: '1_1_1_1', categoryId: '1_1_1', name: 'HD Video Player', icon: '../../../../images/products/1.png', price: 220, }, { ID: '1_1_1_2', categoryId: '1_1_1', name: 'SuperHD Video Player', icon: '../../../../images/products/2.png', price: 270, }, { ID: '1_1_2', categoryId: '1_1', name: 'Televisions', expanded: true, }, { ID: '1_1_2_1', categoryId: '1_1_2', name: 'SuperLCD 42', icon: '../../../../images/products/7.png', price: 1200, }, { ID: '1_1_2_2', categoryId: '1_1_2', name: 'SuperLED 42', icon: '../../../../images/products/5.png', price: 1450, }, { ID: '1_1_2_3', categoryId: '1_1_2', name: 'SuperLED 50', icon: '../../../../images/products/4.png', price: 1600, }, { ID: '1_1_2_4', categoryId: '1_1_2', name: 'SuperLCD 55', icon: '../../../../images/products/6.png', price: 1750, }, { ID: '1_1_2_5', categoryId: '1_1_2', name: 'SuperLCD 70', icon: '../../../../images/products/9.png', price: 4000, }, { ID: '1_1_3', categoryId: '1_1', name: 'Monitors', }, { ID: '1_1_3_1', categoryId: '1_1_3', name: '19"', }, { ID: '1_1_3_1_1', categoryId: '1_1_3_1', name: 'DesktopLCD 19', icon: '../../../../images/products/10.png', price: 160, }, { ID: '1_1_4', categoryId: '1_1', name: 'Projectors', }, { ID: '1_1_4_1', categoryId: '1_1_4', name: 'Projector Plus', icon: '../../../../images/products/14.png', price: 550, }, { ID: '1_1_4_2', categoryId: '1_1_4', name: 'Projector PlusHD', icon: '../../../../images/products/15.png', price: 750, }, ]; @Injectable() export class Service { getProducts(): Product[] { return products; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>

Use either of the following properties to bind the component to plain data:

items[]
Assigns a local array as shown in this demo.
dataSource
Assigns a DataSource object that allows you to perform data shaping operations and use a remote source.

Each object in the TreeView's plain data structure should include the following fields:

id
Unique item identifier.
parentId
Identifier of the parent item.
text
Text displayed by the item.

You can respectively use the keyExpr, parentIdExpr, and displayExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].

In this demo, nodes use the icon and expanded properties. These properties specify the icon and whether a node is collapsed or expanded. Some nodes also include the developer-defined price field.