This section explains the steps required to create a simple Angular TreeView component, and configure its available functionalities
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install Treeview component, use the following command.
npm install @syncfusion/ej2-angular-navigations --save
The —save will instruct NPM to include the Treeview package inside of the
dependencies
section of thepackage.json
.
Import Treeview module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-navigations
[src/app/app.module.ts].
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import Treeview component Module
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
@NgModule({
//declaration of Treeview module into NgModule
imports: [ BrowserModule, TreeViewModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
styles.css
.@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
Note: If you want to refer the combined component styles, please make use of our
CRG
(Custom Resource Generator) in your application.
Modify the template in [src/app/app.component.ts] file to render the Treeview component.
Add the Angular Treeview by using <ejs-treeview>
selector in template
section of the app.component.ts file.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ejs-treeview id='treeelement' ></ejs-treeview>`
})
export class AppComponent {}
TreeView can load data either from local data sources or remote data services. This can be done using the dataSource
property that is a member of the fields
property. The dataSource property supports array of JavaScript objects and DataManager
.
Here, an array of JSON values is passed to the TreeView component.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ejs-treeview id='treeelement' [fields]='field'></ejs-treeview>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {
}
// defined the array of data
public hierarchicalData: Object[] = [
{ id: '01', name: 'Music', expanded: true,
subChild: [
{id: '01-01', name: 'Gouttes.mp3'},
]
},
{
id: '02', name: 'Videos',
subChild: [
{id: '02-01', name: 'Naturals.mp4'},
{id: '02-02', name: 'Wild.mpeg'}
]
},
{
id: '03', name: 'Documents',
subChild: [
{id: '03-01', name: 'Environment Pollution.docx'},
{id: '03-02', name: 'Global Water, Sanitation, & Hygiene.docx'},
{id: '03-03', name: 'Global Warming.ppt'},
{id: '03-02', name: 'Social Network.pdf'},
{id: '03-03', name: 'Youth Empowerment.pdf'},
]
}
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
}
Use the following command to run the application in browser.
ng serve --open
The output will appear as follows.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<div id='treeparent'><ejs-treeview id='treeelement' [fields]='field'></ejs-treeview></div>`
})
export class AppComponent {
constructor() {
}
// defined the array of data
public hierarchicalData: Object[] = [
{ id: '01', name: 'Music', expanded: true,
subChild: [
{id: '01-01', name: 'Gouttes.mp3'},
]
},
{
id: '02', name: 'Videos',
subChild: [
{id: '02-01', name: 'Naturals.mp4'},
{id: '02-02', name: 'Wild.mpeg'}
]
},
{
id: '03', name: 'Documents',
subChild: [
{id: '03-01', name: 'Environment Pollution.docx'},
{id: '03-02', name: 'Global Water, Sanitation, & Hygiene.docx'},
{id: '03-03', name: 'Global Warming.ppt'},
{id: '03-02', name: 'Social Network.pdf'},
{id: '03-03', name: 'Youth Empowerment.pdf'},
]
}
];
public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule,TreeViewModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can also explore our Angular TreeView example to knows how to present and manipulate data.