Dynamic Tree Using Angular 2/4

Hello Angular Experts and Beginners, if you really stuck in a situation how to form dynamic tree using  <ul> and <li>. I’m sure that this blog will definitely helps you.

Download Source Code

Step 1: Prequisite you should have a json data in a format as follows.

Step 2: Once you have data create the following structure in your angular project

File: test.json



Step 3: Creating declaration file for javascript file.

Here we are now creating a declaration file for the javascript file (myscript.js) using Ambients in typescript.

For reference of TypeScript Ambients please follow this post Typescript Ambients

File: myscript.js

File: myscript.d.ts

Step 4: Once declaration file is ready then create component and template and add reference of declaration file in the component

File: app.component.ts

File: template.html

Note: In the below code i’ve created Recursive ng-template. 

  1. #mylst1 is a template reference variable for the ng-template
  2. let-list –> here we are defining a local variable. let is a key word to declare variables in typescript.
  3. ng-container –> It’s a container to group html elements, which is same as ng-include  in AngularJS. For reference please follow the link 
  4. $implicit –> It is used to set the value for our ng-template using context property of ngTemplateOutlet.

File: app.module.ts

File: main.ts

Step 5: Create a html file in src/DynamicTree.html folder

File: DynamicTree.html


Date time picker in angular 2/4

Download source code

To add datepicker and timepicker in angular 2/4 forms we have a good builtin components given by ng2-bootstrap. No need to go for other third party date pickers which might work or may not. Ng2-bootstrap provides us all the feature of the normal bootstrap which we use daily. So you can just blindly remove the bootstrap and replace it with ng2-bootstrap/ ngx-boostrap.

Step 1: First you need to install the package using npm 

Install commands

  • Open command prompt –> go to you project directory –>  npm install ng2-bootstrap –save –> run command
  • Similarly install  npm install moment –save

Step 2: Now  configure the ng2-bootstrap in systemjs.config.js

Go to systemjs.config.js,  add the moment and ng2-bootstrap npm packages to the map  as below

Now add these packages in the packages

Step 3 : Import DatepickerModule, TimepickerModule  in Root NgModule

import { DatepickerModule, TimepickerModule } from ‘ng2-bootstrap’;


Step 4 : Create component and add the components to your html




D3 tree with context menu on various levels

Download source code – D3 Tree using HTML

Download source code – D3 Tree Using Angular 2/4 


Step 1: Creating html file to display the D3 Tree

From the example given get the Javascript libraries and Stylessheets.


Step 2: Sample data in json file


Step 3: Modify the tree_collapsible.js to create new context menu

In the function treeCollapsible( ) do the following changes to create context menu for different levels.

  • After declaring d3Container variable,  create context menu as follows

  • After diagonal projection get Json file data using Ajax.
  • Now group names as per the levels. from the below code groupNames[] will have level 1 and memeberNames[] will have level 2.
  • And root node is assigned to the root variable as root = treeData[0];



How to use this D3 Tree in angular 2/4 ?This is the place where Typescript Ambients comes into picture.

What is Ambients ?

Ambient Declaration is the process of providing declarations for user javascript as well as for javascript third party libraries. Third party libraries can be either JQuery, AngularJS, Node JS, Require JS, Polymer JS etc.

  • Developer no need to rewrite the third party bundles. We can just make use of them in typescript with type-safe.
  • It enables Intellisense  feature for third party bundles of all the variables and its methods.
  • Ambient declarations will have an extension (.d.ts), where‘d’ denotes the declaration.                                         Ex: sample.jssample.d.ts
  • It’s not mandatory that declarations must be in a declaration file with extension (.d.ts) it can be either in (.ts / .d.ts), but it’s recommended to separate the declarations in a separate file.
  • If a file has the extension.d.ts then each root level definition must have the declare keyword prefixed to it, so that the programmer can make sure that declared items will exist at run time


Step 1: Let’s Assume we have a javascript file sample.js

File: Sample.js

Now we need to modify this sample.js as follows

Step 2: Create declaration file for sample.js

File: sample.d.ts

Step 3: Provide reference of declaration file sample.d.ts in the component


Now similary we need to modify the file tree_collapsible.js from the above example.

Step 1: Modify the tree_collapsible.js. And change the path of the sampledata.json

Step 2: Creating declaration  file as follows tree_collapsible.d.ts

Step 3: Provide reference for declaration file in the component. We need to load the function with in ngAfterViewInit( ). 

Reason behind this is before initializing the component template if we load the function, D3 component would not be able to find the element that is required to draw SVG.


Step 4: Create template for Component

File: template.html

Step 5: Provide references of the required files for D3 Tree in the main HTML page.

File: src/Index.html

Note: You will get the same output. If not check if any errors in browser console window. Errors mostly will be file not found. If that is the issue please give the relevant path.

Stuck with the back button / page refresh issue in Angular 2/4 ?

Step 1: Import LocationStrategy, HashLocationStrategy from @angular/common library in your Root NgModule

Ex: import {LocationStrategy, HashLocationStrategy } from ‘@angular/common’;

Step 2: Create a provider with token as LocationStrategy and its dependency as HashLocationStrategy

Ex: providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]