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

Output:

 

 

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.

d3chart.html

Step 2: Sample data in json file

sampledata.json

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];

Output:

 


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

Ex:

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 }]

 

How To Upload Files In MVC Using Ajax

I Assume you have a file input control and you need to upload the files asynchronously  to your server. To do this we have FormData() i.e FormData() can be appended with the data as key-value pair.

From the following code

  1.  key: “selectedImage”, value: file
  2.  key: “userId”, value: 10

 

Step 1: Frame FormData  for passing file with  parameters (if required)

 

 

Step 2: Write Controller Action method code