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