How to get started easily with Syncfusion Angular 11 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 11 project with minimal code.

Prerequisites

Before starting, the following tools and SDK needs to be installed in your machine to Angular 11 application:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. You can install Angular CLI 11 using the following command.

npm install -g @angular/cli@11.2.3

Create an Angular 11 application

2. Now create a new Angular project by using the command `ng new` and navigate to that folder.

ng new angular11-app

cd angular11-app

3. Install the ej2-angular-navigations package through the npm install command.

npm install @syncfusion/ej2-angular-navigations

4. Serve the application using below command.

ng serve 

Adding Angular 11 Treeview

You can add the Angular 11 treeview component by using `ejs-treeview` tag and the attributes used within this tag allows you to define other Treeview functionalities.

1. 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-navigations';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    TreeViewModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

2. Import the CSS styles of the Treeview component.

[styles.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';

3. Add the Treeview component in the template file.

[app.component.html]

<ejs-treeview [fields]="fields"></ejs-treeview>

4. 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" },

     ]

   }

}

5. 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

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below.