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!!