How to get started easily with Syncfusion Angular 7 Treeview?
The Essential JS2 Angular Treeview component is used to represent hierarchical data in a tree-like structure with advanced functions to edit, drag and drop, select with CheckBox, and more. TreeView can be populated from a data source such as an array of JavaScript objects or from DataManager. This article explains how to easily get started with EJ2 Treeview component in Angular 7 project with minimal code.
Prerequisites
Before starting, the following tools and SDK needs to be installed in your machine to Angular 7 application:
- Node.js (v8.10.0 or above)
- Angular 7
- Angular CLI
Installation and application creation
You can install Angular CLI 7 using the following command.
npm install -g @angular/cli@7.0.5 |
Note:
To follow and run the application in Angular 6 or earlier version, you can replace the CLI command version with your preferred version and install it.
npm install -g @angular/cli@<CLI VERSION> |
Create an Angular 7 application
ng new treeview-angular7 cd treeview-angular7 |
Installing EJ2 Treeview
npm install @syncfusion/ej2-angular-navigations |
Serve the application
ng serve --open |
Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 7 version.
Adding Angular 7 Treeview
You can add the Angular 7 treeview component by using `ejs-treeview` tag and the attributes used within this tag allows you to define other Treeview functionalities.
- Import TreeViewModule into app.module.ts file from the @syncfusion/ej2-angular-navigations package.
[app.module.ts]
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; import { TreeViewModule } from '@syncfusion/ej2-angular-inputs';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TreeViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
- Import the CSS styles of the Treeview component.
[style.css]
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; |
- Add the Treeview component in the template file.
[app.component.html]
<ejs-treeview [fields]="fields"></ejs-treeview> |
- Add the fields property with dataSource as below in a component file.
[app.component.ts]
export class AppComponent { fields: FieldsSettingsModel = { dataSource: [ { id: "1", text: "item 1" }, { id: "2", text: "item 2", child: [ { id: "2-1", text: "child 1" }, { id: "2-2", text: "child 2" }, ] }, { id: "3", text: "item 3" }, ] } }
|
- Run the application with the following command and you should the see the below represented output of the EJ2 Angular Treeview component.
ng serve --open |
Checkbox
Checkbox allows you to check more than one node in TreeView without affecting the UI's appearance by enabling the showCheckBox property. When this property is enabled, checkbox appears before each TreeView node text.
[app.component.html]
<ejs-treeview [fields]="fields" showCheckBox="true"></ejs-treeview>
|
After mapping the properties, you should see the Treeview with checkbox enabled when you run the application as shown in the following image.
Summary
You can learn more about the Angular 7 Treeview from the following links.
GitHub repository of code used in this article can be found here.
Checkout Angular 7 Treeview features here.
Checkout Angular 7 Treeview documentation here.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
