How to Create Angular 2 Treeview Components [Checkbox/Dropdown]?

“How to Create Treeview components in Angular 2”?

“How to”, “When to”?

In this section, I am going to share the checkable dropdown, checkbox "Treeview" components with multiple selections and de-selections also using “Angular 2” [ng2-dropdown-treeview]. This is a dependency; we will need to install it. If the “NPM” installations in installed, we need to import in our main module in the Apps.

Installation: - [npm install --save ng2-dropdown-treeview]

For example to import “installed namespace”,

//import our root components
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DropdownTreeviewModule, DropdownTreeviewConfig, TreeItem } from 'ng2-dropdown-treeview';

//My Component and Templates
@Component({
    selector: 'my-app',
    template: `
  <div id="main-temp">
   <h2>Example, Angular 2 dropdown and checkbox treeview components</h2>
   <div class="row">
    <div class="col-sm-12">
     <div class="alert alert-success" role="alert">
      Selected books: {{bookValue}}
     </div>
    </div>
    <div class="col-sm-12">
     <div class="form-group row">
      <label for="book-category" class="col-sm-3 col-form-label">Book category</label>
      <div class="col-sm-9">
       <leo-dropdown-treeview id="book-category" [config]="bookConfig" [items]="bookItems" (selectedChange)="bookValue = $event"></leo-dropdown-treeview>
      </div>
     </div>
    </div>
   </div>
  </div>
  `,
});

export class MyApp {
    bookItems: TreeItem[];
    bookValue: number[];
    bookConfig: DropdownTreeviewConfig = {
        isShowFilter: true,
        isShowCollapseExpand: true,
        noSelectText: 'Select categories',
        moreSelectText: 'categories selected'
    };

    ngOnInit() {
        this.initBooks();
    }

    private initBooks() {
        let babyCat = new TreeItem('Children', 1);
        babyCat.children = [
            new TreeItem('B1 3-5', 11),
            new TreeItem('B2 6-8', 12),
            new TreeItem('B3 9-12', 13),
   new TreeItem('B4 1-3', 13),
   new TreeItem('B5 0-1', 13)
        ];
  
        let teenCat = new TreeItem('Teen', 2);    
        teenCat.children = [
            new TreeItem('Anil Singh', 21),
            cultureCategory,
            new TreeItem('Maths', 23)
        ];
  
  let cultureCat = new TreeItem('Culture', 22); 
        cultureCat.children = [
            new TreeItem('INDIA', 221),
            new TreeItem('USA', 222),
        ];
  
        let magaCategory = new TreeItem('Maga', 31);
        magaCategory.disabled = true;
  
        let otherCat = new TreeItem('Others', 6);
        otherCat.children = [
            new TreeItem('PQR', 50),
            new TreeItem('XYZ', 52),
        ];
        otherCat.disabled = true;
  
        this.bookItems = [babyCat, teenCat, magaCategory, otherCat];
    }
}

//My Module
@NgModule({
    imports: [
        BrowserModule,
        DropdownTreeviewModule.forRoot()
    ],
    declarations: [MyApp],
    bootstrap: [MyApp]
});

//My App Module
export class AppModule { };

//App main entry point.
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//HTML Template and Actions
<div id="main-temp">
 <h2>Example, Angular 2 dropdown and checkbox treeview components</h2>
 <div class="row">
  <div class="col-sm-12">
   <div class="alert alert-success" role="alert">
    Selected books: {{bookValue}}
   </div>
  </div>
  <div class="col-sm-12">
   <div class="form-group row">
    <label for="book-category" class="col-sm-3 col-form-label">Book category</label>
    <div class="col-sm-9">
     <leo-dropdown-treeview id="book-category" [config]="bookConfig" [items]="bookItems" (selectedChange)="bookValue = $event"></leo-dropdown-treeview>
    </div>
   </div>
  </div>
 </div>
</div>

Try to learn “Angular 2” with list of “demoexamples” shown in this page.

Stay Informed - Demo Link.

Stay Informed - Github download Example code.

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2