Angular 2/4 Archives

Angular 4 Directives – Lesson 3.3

May 14, 2018June 1, 2018 admin847785456 1 Comment

3.2 Attribute Directives

Here directive is just a class with decorator @Directive and this allows us to specify the directive’s selector.

Using custom attribute directive we can change the color, back-ground, font-size etc., of the HTML host element by using ElementRef
Renderer class is a built-in service that provides an abstraction for UI rendering manipulations.

Let’s create a custom attribute directive “ShowAlert”

Step 1: Create a folder and name it as CustomDirective: /src/app/CustomDirective

Step 2: Now create a typescript file to create your own attribute directive under the associated folder created. And then import Directive, ElementRef, HostListener, Renderer from @angular/core library.

Step 3: And provide your selector name, here I’ve named it as ShowAlert, and create a class that make this directive visible to the component i.e.,add export before the class.

File: app.myDirective.ts

import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';

@Directive({
    selector: '[ShowAlert]'
})
export class FirstAttrDirective{}

import { Directive, ElementRef, HostListener, Renderer } from '@angular/core';

@Directive({

selector: '[ShowAlert]'

})

export class FirstAttrDirective{}

Step 4: Now define contructor for FirstAttrDirective class, and define the style and events using renderer.

For setting up styles,

Renderer.setElementStyle(rendererElement:any, styleName: string, styleValue: string)

(or)

ElementRef.nativeElement.style

For creating events,

Renderer.listen(parentElement: any, name: string, callBack: function)

export class FirstAttrDirective{
constructor(private el: ElementRef, private renderer: Renderer) {
        renderer.setElementStyle(el.nativeElement, "cursor", "pointer");
        renderer.setElementStyle(el.nativeElement, "color", "blue");

        renderer.listen(el.nativeElement, "mouseover", function () {
            renderer.setElementStyle(el.nativeElement, "color", "red");
            el.nativeElement.style.fontSize = '24px';
            //renderer.setElementStyle(el.nativeElement, "font-size", "24px");
        });
        renderer.listen(el.nativeElement, "mouseout", function () {
            renderer.setElementStyle(el.nativeElement, "color", "blue");
            renderer.setElementStyle(el.nativeElement, "font-size", "16px");
        });
        renderer.listen(el.nativeElement, "click", function () {
            alert("hello world");
        });
    }
}

export class FirstAttrDirective{

constructor(private el: ElementRef, private renderer: Renderer) {

renderer.setElementStyle(el.nativeElement, "cursor", "pointer");

renderer.setElementStyle(el.nativeElement, "color", "blue");

renderer.listen(el.nativeElement, "mouseover", function () {

renderer.setElementStyle(el.nativeElement, "color", "red");

el.nativeElement.style.fontSize = '24px';

//renderer.setElementStyle(el.nativeElement, "font-size", "24px");

});

renderer.listen(el.nativeElement, "mouseout", function () {

renderer.setElementStyle(el.nativeElement, "color", "blue");

renderer.setElementStyle(el.nativeElement, "font-size", "16px");

});

renderer.listen(el.nativeElement, "click", function () {

alert("hello world");

});

}

Step 5: Create your component

File: app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div ShowAlert color="blue"> Show Alert </div>`
})
export class AppComponent {}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

})

export class AppComponent {}

Step 6: Add component and Directive in the declaration[ ] of the NgModule i.e., AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FirstAttrDirective } from './app.myDirective';

@NgModule({
    imports: [BrowserModule],
    declarations: [
        AppComponent,
        FirstAttrDirective
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FirstAttrDirective } from './app.myDirective';

@NgModule({

imports: [BrowserModule],

declarations: [

AppComponent,

FirstAttrDirective

bootstrap: [AppComponent]

})

export class AppModule { }

Step 7: Create a main.ts to bootstrap the NgModule

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Step 8: Create a HTML file in /src/

File: CustomDirective.html

Refer required scripts shim.min.js, zone.js, system.src.js, system.config.js and refer the main.js from CustomDirective folder

System.import('app/CustomDirective/main.js').catch(function (err) { console.error(err); });
<body>
    <my-app>Loading...</my-app>
</body>

System.import('app/CustomDirective/main.js').catch(function (err) { console.error(err); });

<body>

<my-app>Loading...</my-app>

</body>

Output: Default color will be blue, on mouseover font size get increased and changes its color to red, on mouseout will change color to blue and decrease its font size.

Tadaaaa.. 🙂

Angular 4 Directives- Lesson 3.2

May 9, 2018 admin847785456 Leave a comment

Hi friends, in the last session we have learned about built-in directives (ngIf, ngFor, ngSwitch). In this session we will learn,

Style and Class Directives ( ngClass, ngStyle)

ngClass:

It is used to add and remove CSS classes on an HTML element.
CSS Classes can be added in several ways

Using string
Using array
Using object
Using Component methods

When using ngClass with object, classes will be added and removed based on the Boolean value that returned.
If the value of expression istrue then respective CSS class will be added otherwise that CSS class will be removed from HTML element at run time.

Using String: When using string format, class names must be presented between single quotes with in double quotes “‘class1′” and multiple classes can be separated by space.

File: template.html

<p [ngClass]="'class1'">
        Using String.
</p>

<!--Adding multiple classes -->
<p [ngClass]="'class1 class2'">
        Using String.
</p>

<!--Using *ngFor -->
<div *ngFor="let emp of employees" [ngClass]="'class1 class2'">
       {{emp.EmpName}}
</div>

Using String.

</p>

Using String.

</p>

</div>

File: app.component.ts

Adding styles for the respective classes in component

@Component({
  selector: 'my-app', 
  templateUrl: './template.html',
  styles: [`
      .class1 {
          background-color: red;
      }
      .class2 {
          font-size: 24px;
      }
`]
})
export class AppComponent {
    employees = [
        { EmpId: 1001, EmpName: "John" },
        { EmpId: 1002, EmpName: "Benzamen" },
        { EmpId: 1003, EmpName: "Elizabeth" }
    ];
}

@Component({

selector: 'my-app',

templateUrl: './template.html',

styles: [`

.class1 {

background-color: red;

}

.class2 {

font-size: 24px;

}

})

export class AppComponent {

employees = [

{ EmpId: 1001, EmpName: "John" },

{ EmpId: 1002, EmpName: "Benzamen" },

{ EmpId: 1003, EmpName: "Elizabeth" }

];

}

ngClass using array: When using Array format, each ngClass array item (i.e.,class) must be presented in the string format.

Ex: [ngClass] =”[‘class1′,’class2’]”

File: template.html

<p [ngClass]="['class1', 'class2']">
        Using Array.
</p>

<!--Using *ngFor -->
<div *ngFor="let emp of employees" [ngClass]="['class1', 'class2']">
       {{emp.EmpName}}
</div>

Using Array.

</p>

</div>

ngClass using object: When using object, classes will be formatted in the form of object i.e., each class will be of key and value pairs.

Key: css class name

Value: expression that returns Boolean value

<p [ngClass]="{'one': true, 'three': false }">
        Using Object.
</p>

<!--Using *ngFor -->
<div *ngFor="let emp of employees; let flag = odd;">
<div [ngClass]="{'class1':flag, 'class2':flag, 'class3':!flag, 'class4':!flag}"> {{emp.EmpName}} </div>
</div>

Using Object.

</p>

<div [ngClass]="{'class1':flag, 'class2':flag, 'class3':!flag, 'class4':!flag}"> {{emp.EmpName}} </div>

</div>

In component file add styles for the respective classes

import { Component } from '@angular/core';
 
@Component({
  selector: 'my-app', 
  templateUrl: './template.html',
  styles: [`
      .class1 {
          color: green;
      }
      .class2 {
          font-size: 20px;
      }
      .class3 {
          color: red;
      }
      .class4 {
          font-size: 15px;
      } 
`]

})
export class AppComponent {
}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './template.html',

styles: [`

.class1 {

color: green;

}

.class2 {

font-size: 20px;

}

.class3 {

color: red;

}

.class4 {

font-size: 15px;

}

})

export class AppComponent {

}

Using Component Methods: Whereas when using component methods, instead declaring styles statically here styles will be dynamically rendered into template by calling component methods.

Depending upon the need/requirement we can pass parameters to the component methods and can dynamically get the required styles.

Ex: [ngClass]=”GetStyles( )”

File: template.html

<div [ngClass]="getClasses()">
        Using Component Method.
    </div>

Using Component Method.

</div>

File: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    employees = [
        { EmpId: 1001, EmpName: "John" },
        { EmpId: 1002, EmpName: "Benzamen" },
        { EmpId: 1003, EmpName: "Elizabeth" }
    ];
   
    getClasses(flag: string) {
        let cssClasses;
            cssClasses = {
                'class1': true,
                'class2': true,
                'class3': true,
                'class4': true
            }
        return cssClasses;
    }	
}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

employees = [

{ EmpId: 1001, EmpName: "John" },

{ EmpId: 1002, EmpName: "Benzamen" },

{ EmpId: 1003, EmpName: "Elizabeth" }

];

getClasses(flag: string) {

let cssClasses;

cssClasses = {

'class1': true,

'class2': true,

'class3': true,

'class4': true

}

return cssClasses;

}

ngStyle: This directive is used to modify the elements / component styles

It accepts an object which defines the elements styles.
Both kebab case and lower camel case can be used when specifying style properties.
Flexible to add and remove style properties.

File: template.html

<h3>ngStyles Examples</h3>
Enter Size:  <input type="text" name="name" [(ngModel)]="fontsize" value="" />
<input type="radio" name="name" [(ngModel)]="color" value="red" /> Red
<input type="radio" name="name" [(ngModel)]="color" value="green" /> Green
<input type="radio" name="name" [(ngModel)]="color" value="blue" /> Blue
<p [ngStyle]="{'font-size':fontsize+'px','color':color}">{{myname}}</p>

<h3>ngStyles Examples</h3>

Enter Size: <input type="text" name="name" [(ngModel)]="fontsize" value="" />

<input type="radio" name="name" [(ngModel)]="color" value="red" /> Red

<input type="radio" name="name" [(ngModel)]="color" value="green" /> Green

<input type="radio" name="name" [(ngModel)]="color" value="blue" /> Blue

<p [ngStyle]="{'font-size':fontsize+'px','color':color}">{{myname}}</p>

File: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    myname: string = "John";

    //rest of the code goes here
}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

myname: string = "John";

//rest of the code goes here

}

Angular 4 Directives – Lesson 3

April 24, 2018May 3, 2018 admin847785456 Leave a comment

Hi friends, in the last session we have learnt about how to setup in the local environment. In this session we will learn about Directives. Topics that are going to be covered in this session are

Structural directives (Built-in Directives (ngIF, ngFor, ngSwitch)
Style and Class Directives ( ngClass, ngStyle)
Attribute directives
Host Listener and Host Binding

Overview of Directives:

Directives are the classes that can change the behaviour or appearance of the components by using CSS Classes, CSS Styles and events.

There are three kinds of directives in Angular:

Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements.
Attribute directives—change the appearance or behavior of an element.

Components are the most common of the three directives. You saw a component for the first time in the QuickStart example.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf in the Template Syntax page.

We use (*) before the structural directives, and when we use (*) before ngIf/ ngFor, angular actually recognizes that the current element as a template and it will read the current elements as <ng-template>. Where as in Angular 2.X it reads as <template>.

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax page, for example, can change several element styles at the same time.

*ngIf: This directive is used for conditional check on the HTML targeting elements. This will work similar to ng-if in Angular 1.X, where the elements will not get rendered into DOM until the condition satisfies.

Step1: From the quick start example edit the component.ts

File: app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    hide = false;    
    myname = "John Smith";
}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

hide = false;

myname = "John Smith";

}

Step2: Create a template.html in the app folder

File: template.html

<p *ngIf="!hide">{{myname}}</p>

<!--By using comparision-->
<p *ngIf="myname=='John Smith'">{{myname}}</p>

<p *ngIf="!hide">{{myname}}</p>

<p *ngIf="myname=='John Smith'">{{myname}}</p>

Note: when use * before ngIf, angular treats it as <ng-template>

<ng-template [ngIf]="myname == 'John Smith'">
  John Smith
</ng-template>

<ng-template [ngIf]="myname == 'John Smith'">

John Smith

</ng-template>

*ngIf else: Angular 4 *ngIf has if/else syntax that make sense when you are making ajax calls we can show loading within the page. Where as else block is not existed in Angular 2.

From the above example, add the following html in the template

File: template.html

<p *ngIf="hide ;else template1">{{myname}}</p>

    <ng-template #template1>
        Hello {{myname}}
    </ng-template>

<p *ngIf="hide ;else template1">{{myname}}</p>

<ng-template #template1>

Hello {{myname}}

</ng-template>

Angular compiler (JIT or AOT) transforms any <ng-template> elements and directives used with an asterisk (*) into views that are separate from the root component view.

Here when we use (*) before ngIF, angular actually recognizes that the current element as a template, and angular reads it as,

<ng-template [ngIf]="hide">
    {{myname}}
</ng-template>

<ng-template [ngIf]="hide">

</ng-template>

*ngIf then else: *ngIf directive can use two templates, one for If condition and the other for else condition. In the previous example we have seen using template for else condition, now for If condition we need to use then statement.

File: template.html

<p *ngIf="!hide;then template1;else template2">{{myname}}</p>

    <ng-template #template1>
        Hello {{myname}}
    </ng-template>

    <ng-template #template2>
        Default template
    </ng-template>

<p *ngIf="!hide;then template1;else template2">{{myname}}</p>

<ng-template #template1>

Hello {{myname}}

</ng-template>

<ng-template #template2>

Default template

</ng-template>

*ngFor: *ngFor directive is used to iterate through each element of any array, it works similar to For Loop in JavaScript, where in JavaScript we will write for loop within the <script> tag, but in angular we use *ngFor in the HTML as directive for any kind of elements.

From the above example add the following code in the component file

File: app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app', 
  templateUrl: './template.html'
})
export class AppComponent {
    employees = [
        { EmpId: 1001, EmpName: "John" },
        { EmpId: 1002, EmpName: "Benzamen" },
        { EmpId: 1003, EmpName: "Elizabeth" }
    ];
}

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './template.html'

})

export class AppComponent {

employees = [

{ EmpId: 1001, EmpName: "John" },

{ EmpId: 1002, EmpName: "Benzamen" },

{ EmpId: 1003, EmpName: "Elizabeth" }

];

}

File: template.html

<p>List of employees</p>
<ul>
    <li *ngFor="let emp of employees">{{emp.EmpName}}</li>
</ul>

<p>List of employees</p>

<ul>

<li *ngFor="let emp of employees">{{emp.EmpName}}</li>

</ul>

Here we are using for..of, where

for..of iterates through items and returns values
for..in iterates through properties and returns list of keys
let is a keyword which is a dynamic datatype of ECMA script.
emp is a temporary variable that hold the current employee from the employees array.
employees is the array of items

Here the let can also create a index as a reference of the current item.

<ul>
     <li *ngFor="let emp of employees;let i=index">item {{i}}: {{emp.EmpName}}</li>
</ul>

<ul>

<li *ngFor="let emp of employees;let i=index">item {{i}}: {{emp.EmpName}}</li>

</ul>

Here index is a built-in keyword of angular framework which can be used in *ngFor. Where angular renders the above code as follows.

<ul>
  <ng-template ngFor let-emp [ngForOf]="employees">
     <li>item {{i}}: {{emp.EmpName}}</li>
  </ng-template>
</ul>

<ul>

<ng-template ngFor let-emp [ngForOf]="employees">

<li>item {{i}}: {{emp.EmpName}}</li>

</ng-template>

</ul>

*ngFor with select tag:

<select>
     <option *ngFor="let emp of employees;let i=index" [value]="emp.EmpId">
          item {{i}}: {{emp.EmpName}}
     </option>
</select>

item {{i}}: {{emp.EmpName}}

</option>

</select>

(or)

<select>
     <option *ngFor="let emp of employees;let i=index" value="{{emp.EmpId}}">
       item {{i}}: {{emp.EmpName}}
     </option>
</select>

item {{i}}: {{emp.EmpName}}

</option>

</select>

ngSwitch: ngSwitch works similarly the switch statement that we use in C# / java etc., Here for defining case we use *ngSwitchCase and for default case we use *ngSwitchDefault

From the above example using the same list of employees, we have created a example

<p>Using ngSwitch</p>
<button (click)="value=0">Emp 1</button>
<button (click)="value=1">Emp 2</button>
<button (click)="value=2">Emp 3</button>
<hr>
	<div [ngSwitch]="value">
		<div *ngSwitchCase="0">Details 
			<br />
			<b>Id: {{employees[value].EmpId}}</b>
			<br />
			<b>Name: {{employees[value].EmpName}}</b>
			<br />
			<b>Salary: {{employees[value].EmpSal}}</b>
		</div>
		<div *ngSwitchCase="1">Details 
			<br />
			<b>Id: {{employees[value].EmpId}}</b>
			<br />
			<b>Name: {{employees[value].EmpName}}</b>
			<br />
			<b>Salary: {{employees[value].EmpSal}}</b>
		</div>
		<div *ngSwitchCase="2">Details 
			<br />
			<b>Id: {{employees[value].EmpId}}</b>
			<br />
			<b>Name: {{employees[value].EmpName}}</b>
			<br />
			<b>Salary: {{employees[value].EmpSal}}</b>
		</div>
		<div *ngSwitchDefault>Default Template</div>
	</div>

<p>Using ngSwitch</p>

<hr>

<div *ngSwitchCase="0">Details

<br />

<b>Id: {{employees[value].EmpId}}</b>

<br />

<b>Name: {{employees[value].EmpName}}</b>

<br />

<b>Salary: {{employees[value].EmpSal}}</b>

</div>

<div *ngSwitchCase="1">Details

<br />

<b>Id: {{employees[value].EmpId}}</b>

<br />

<b>Name: {{employees[value].EmpName}}</b>

<br />

<b>Salary: {{employees[value].EmpSal}}</b>

</div>

<div *ngSwitchCase="2">Details

<br />

<b>Id: {{employees[value].EmpId}}</b>

<br />

<b>Name: {{employees[value].EmpName}}</b>

<br />

<b>Salary: {{employees[value].EmpSal}}</b>

</div>

<div *ngSwitchDefault>Default Template</div>

</div>

Setup for local environment in Visual Studio – Lesson 2

April 20, 2018May 3, 2018 admin847785456 Leave a comment

Setting up Angular2/Angular4 is a quite complex, it needs a lot of work when compared with the installation for Angular1.X applications.

To setup with the quick start files follow these steps:

Step1: Install Node JS and npm

Step2: Install visual studio 2015 update3

Step3: Configuring External Web Tools.

Step4: Install Typescript

Step5: Download quick start files

Step6: Create ASP.NET Project

Step7: Copy the quick start files into your ASP.NET Project

Step8: Restore Packages

Step9: Build and Run

Install Node and NPM

Angular 2/4 is developed with compatible latest versions of Node, where you must have Node JS version 4.6.X or higher and npm 3.X.X or higher.
Older versions produce errors
Before installing make sure whether you have already installed Node JS before. For checking the Node JS and npm versions follow these commands in command prompt.

For Node JS: node –v

For npm: npm –v

If the PC don’t have Node JS installed it will show you like “node” is not recognized as an internal or external command, “npm” is not recognized as an internal or external command. Or if your PC has older version than the required please update to the latest versions.
For installing latest version of Node JS and npm go to https://nodejs.org/en/download/
Your first step will be completed if you have installed the required versions.

Install Visual Studio 2015 Update 3

Note: For studio 2017 versions can ignore this step

Minimum requirement for developing Angular2/ Angular4 applications is Visual Studio 2015 Update3 because the earlier versions do not follow the best practice for developing applications with Typescript.

To check the version of Visual Studio 2015

Open Visual Studio 2015 go to Help click on About Microsoft Visual Studio

If you don’t have install Visual studio 2015 update 3

Configure External WebTools

We need to configure Visual Studio to use the global external web tools before the tools that ship with visual studio.
Go to Visual Studio Click on Tools Options Expand Projects and Solutions click on External Web Tools now in the right hand side move $(PATH) entry above the $(DevEnvDir) This tells the visual studio to use the external tools like (npm) found in the global path before using its own version of the external tools.
Now click OK and restart the Visual Studio to reflect these changes. Visual Studio now looks first for external tools in the current workspace and if it doesn’t find them, it looks in the global path. If Visual Studio doesn’t find them in either location, it will use its own versions of the tools.

Install Typescript

To develop Angular applications we need Typescript 2.2.0 or its higher versions, as Visual studio Update3 doesn’t have such specifications we need to install it externally.
Before installation we can check our Typescript version in the Visual Studio

Open Visual Studio 2015 go to Help click on About Microsoft Visual Studio

To get the latest version of typescript for Visual studio 2015 go to https://www.microsoft.com/en-us/download/details.aspx?id=48593
To get latest version for Visual Studio 2017 go to https://www.microsoft.com/en-us/download/details.aspx?id=55258

Download Quick start files

You can download the quick start files from Git hub https://github.com/angular/quickstart and then extract the files.

Create ASP.NET Project

Create ASP.NET 4.X or above project in the visual studio

Go to Visual Studio File New Project select Visual C# under Templates click on ASP.NET Web Application select Desired Templates give the project name and click on OK.

Copy Quick start files into ASP project

Copy the quick start files into your project, but all the files are not necessary to be included into your project. So copy only selected files from the extracted folder.

Copy the following files into your .csproj

Src
Bs-config.json
json
json

Restore Packages

Restore the packages required for your application

For restoring packages right click on json select Restore Packages. This uses npm to install all the packages defined in package.json.
In between you can open the Output window to watch the npm commands that are executed. Simply we can ignore the warnings.
After you see the message Installing Packages Complete make sure that your project doesn’t includes node_modules

Build and Run

File: /src/app/component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

})

export class AppComponent { name = 'Angular'; }

In the above example that we have copied from the quick start files,

In the first statement we are importing Component Package from angular/core package directory. After restoring package.json in /node_modules you can see all the packages that are downloaded using npm commands.
In the second statement according to angular,
1. @ is called –> decorator
2. @Component is called –> Component decorator
3. selector –> xml tag / custom html tag
4. template –> view for the component

Complete syntax of component, (Component decorator + class followed by the component decorator)

import { Component } from '@angular/core';

@Component({
  
})
export class <Component_Name>  {  }

import { Component } from '@angular/core';

@Component({

})

export class <Component_Name> { }

3. In the third statement we are exporting the component, to make it visible to other modules in our angular application.

After Installing packages build the Application.
To run the application open Command Prompt go to your Project Directory execute command npm start.
When this command is executed,
firstly it will launch typescript compiler and compiles the application with the following command tsc –p src/
Now it will start the lite-server and launches the browser where you can see the

Output: Hello Angular

But if you run the html by pressing F5 in visual studio it will not show the same output.

To Run in VS with F5 follow these steps

1. In html, change base href from <base href=”/”>to <base href=”/src/”>.
2. Also in html, change the scripts from node_modules to /node_modules with a slash
3. In src/systemjs.config.js, near the top of the file, change the npm pathto /node_modules/ with a slash.
4. After these changes npm start command no longer works, you must choose to configureeither for F5 with IIS or for npm start with the lite-server.
5. Now run the application using F5

Differences between Angular JS and Angular 2

February 22, 2018March 15, 2018 admin847785456 Leave a comment

1.4 Differences between Angular JS and Angular 2

First thing we need to keep in mind is Angular 2 is not an upgrade version for Angular JS. Because Angular 2 is completely different compared to Angular JS architecture.
Architectures of Angular 2 has designed this as a new language which is no more uses MVC pattern. It’s a complete rewrite by the same Angular JS team.
Angular team announces that Angular 1.X is called as “AngularJS”, where Angular 2 will be called as just “Angular”
Let’s see the main differences between Angular JS and Angular 2

Introduction to Angular 4 – Lesson 1

February 21, 2018May 3, 2018 admin847785456 Leave a comment

Hi guys. In this tutorial we are going to learn about Introduction to Angular 4.

Introduction to Angular4

What is angular?
What are the advantages of learning Angular?
Why should we choose angular?
Differences between Angular Version (1.X, 2, 4)

1.1 What is Angular?

Perquisite to learn Angular 4 is Javascript and Typescript.
If someone ask you this question, then you must be aware of what is JAVASCRIPT. Because javascript is the basic for all the scripting languages like Angular4, ReactJs, NodeJs, etc… Here are few languages that are supersets of javascript that will generate Javascript on compiled.

The Aim of Javascript is to make the HTML page dynamic. Now if you have a question that what is dynamic, “Making a HTML Dynamic mean, nothing but changing the data in the HTML page by an action done by the user”.
Angular 4 is a Framework which supports,
- Databinding (one-way/two-way),
- OOPs Features (Inheritance, Interfaces, Encapsulation, Abstraction). One thing clear is Angular 4 doesn’t support polymorphism.
- Angular uses its own routing to develop Single Page Applications (SPA).
- Services like HTTP.
- Dependency Injection.
- Animations.
- Lazy loading application.
- ES5 and ES6 (ECMA script)

Angular is a Framework but not a library, where the difference is pretty simple that library is just an add-on for a framework. But framework gives you a platform to create the application.
Angular is a Structured Framework which is very useful to maintain the DOM and to manipulate the DOM. Why do we call it a Structured F/w is because Angular has its own specified architecture to create an application. To create a new application we must create in the following structure.

Angular 4 uses Typescript language to create an application. So perquisite for learning Angular 4 is Javascript and Typescript. Where Typescript is a superset of javascript which will generate javascript on compile. For compiling typescript it uses TSC (Typescript compiler).
Ex: You have sample.ts.
On compiling sample.ts using tsc –compiler it will generate two more files
Sample.js, sample.map.js

1.2 What are the advantages of learning Angular?

Main advantage is the Consistency and it is easy to Maintain.
It has a Component-based architecture that provides a higher quality of code
Google has announce the LTS( Life time support) for Angular 4.
Angular4 is developed using Typescript enabling us to optimize the code using OOPS concept.
Angular is very famous for Single Page Application (SPA).
Two-way data binding reduces the development time for synchronizing View and Model.
Dependency Injection allows us to reuse the code, and we can import third party libraries to Angular by using DI (Dependency Injection), and where we can share the various services into other services or components.
Directives are very helpful for developers to change the behavior of the HTML elements in Document Object Model (DOM), permitting us to create dynamic and rich content with HTML. Angular provides us the facility to create our custom Directives.

1.3 Why Should we choose Angular ?

Angular is a open source framework which we can freely download, no need for pay money for
this framework.
It makes client side programming very easy.
The tooling support is as good as on Java or .Net platforms.
Angular uses TypeScipt language, Its object oriented and supports core features like interfaces and classes. TypeScipt code analyzer warns you about the errors as you type.
Data Binding is a primary feature of angular, it can be implemented in 2-Ways,
- One-way data binding
- Two-way data binding
First time in client side frameworks angular introduced this data binding concept, this
feature will reduce lot of client side coding related to data presentation (HTML view).
It’s a pattern language it uses HTML and extends the behaviour of the HTML elements with directives(for example, <myPaging></myPaging>. This improve code readability.
Dependency injection give you a clean way to implement loose coupling between components and
services. Binding and events allows you to create reusable and loosely coupled components.
Performing validations will becomes so simple, just we need to know about HTML5 Validation attributes (required, pattern, max-length, min-length).
Unit testing becomes easy in Angular.
Angular applications can run on all major browsers and smart phones, including Android and
IOS based phones/tablets.
It has own Routing support for single page application(SPA), in SPA only main page will load from
server remaining all requestes are processed at clint side without reloading the whole page.

Angular 2/4 Router no longer navigates when navigating to the current URL

January 18, 2018February 20, 2018 admin847785456 Leave a comment

The concept we need to understand here is that the,

Angular route will navigate only when it navigates to a different route using [routeLink] attribute.

Solution:

Force reload/ refresh the current route using RouteReuseStrategy
Now we need to set this.router.navigated = false; after navigation completes.

constructor(public router: Router) {
        
        this.router.routeReuseStrategy.shouldReuseRoute = function () {
            return false;
        };

        this.router.events.subscribe((evt) => {
            if (evt instanceof NavigationEnd) {
                this.router.navigated = false;
                window.scrollTo(0, 0);
            }
        });
}

constructor(public router: Router) {

this.router.routeReuseStrategy.shouldReuseRoute = function () {

return false;

};

this.router.events.subscribe((evt) => {

if (evt instanceof NavigationEnd) {

this.router.navigated = false;

window.scrollTo(0, 0);

}

});

}

Window.scrollTo(0,0) , will move your page scroll bar to the top position.

Angular 4 – Cheat Sheet

December 21, 2017March 12, 2018 admin847785456 Leave a comment

Download in PDF Version

Angular4 Cheat Sheet

Dynamic Tree Using Angular 2/4

December 7, 2017 admin847785456 Leave a comment

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.

[
  {
    "value": "text",
    "children": [

      {
        "value": "text",
        "children": [
          {
            "value": "text",
            "children": [
              {
                "value": "text",
                "children": [
                  {
                    "value": "text",
                    "children": []
                  }
                ]
              }
            ]
         }
      ]
   }
]

[

{

"value": "text",

"children": [

{

"value": "text",

"children": [

{

"value": "text",

"children": [

{

"value": "text",

"children": [

{

"value": "text",

"children": []

}

]

}

]

}

]

}

]

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

File: test.json

[
  {
    "value": "Programming Languages",
    "children": [

      {
        "value": "DotNet",
        "children": [
          {
            "value": "Visual Studio",
            "children": []
          },
          {
            "value": "Sql Service",
            "children": []
          },
          {
            "value": "ASP.NET",
            "children": [
              {
                "value": "Web Forms",
                "children": [
                  {
                    "value": "Entity Framework",
                    "children": []
                  },
                  {
                    "value": "Ado.Net",
                    "children": []
                  }
                ]
              },
              {
                "value": "MVC",
                "children": [
                  {
                    "value": "Entity Framework",
                    "children": []
                  },
                  {
                    "value": "Ado.Net",
                    "children": []
                  }
                ]
              }

            ]
          }

        ]
      },
      {
        "value": "Java",
        "children": [
          {
            "value": "Eclipse",
            "children": []
          },
          {
            "value": "MySql",
            "children": []
          },
          {
            "value": "Spring & Hibernate",
            "children": []
          }

        ]
      }
      
    ]

  }
]

[

{

"value": "Programming Languages",

"children": [

{

"value": "DotNet",

"children": [

{

"value": "Visual Studio",

"children": []

{

"value": "Sql Service",

"children": []

{

"value": "ASP.NET",

"children": [

{

"value": "Web Forms",

"children": [

{

"value": "Entity Framework",

"children": []

{

"value": "Ado.Net",

"children": []

}

]

{

"value": "MVC",

"children": [

{

"value": "Entity Framework",

"children": []

{

"value": "Ado.Net",

"children": []

}

]

}

]

}

]

{

"value": "Java",

"children": [

{

"value": "Eclipse",

"children": []

{

"value": "MySql",

"children": []

{

"value": "Spring & Hibernate",

"children": []

}

]

}

]

}

]

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

var myscript = {
    
    collapsible: function (e, current) {

    e.preventDefault();

    $(current).toggleClass("collapse expand");

    $(current).closest('li').children('ul').slideToggle();

   },

}

var myscript = {

collapsible: function (e, current) {

e.preventDefault();

$(current).toggleClass("collapse expand");

$(current).closest('li').children('ul').slideToggle();

}

File: myscript.d.ts

declare module MyScript {

    export interface Main {

        collapsible(event: any, current: any): void;

    }

}

declare var myscript: MyScript.Main;

declare module MyScript {

export interface Main {

collapsible(event: any, current: any): void;

}

declare var myscript: MyScript.Main;

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

/// <reference path="myscript.d.ts" />
import { Component} from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/observable';
import { TreeModel, NodeEvent  } from 'ng2-tree';

@Component({
    selector: 'my-app',
    templateUrl: './template.html',
    styles: [`
.collapse {
            width: 10px;
            height: 13px;
            background-image: url('app/AngularDynamicTree/ui-icons_454545_256x240.png');
            background-repeat: no-repeat;
            background-position: -36px -17px;
            display: inline-block;
            cursor: pointer;
        }

        .expand {
            width: 10px;
            height: 13px;
            background-image: url('app/AngularDynamicTree/ui-icons_454545_256x240.png');
            background-repeat: no-repeat;
            background-position: -50px -17px;
            display: inline-block;
            cursor: pointer;
        }

        ul li {
            list-style: none;
        }

            ul li b {
                margin-left: 15px;
            }

        .table > thead > tr > th, .table > tbody > tr > td {
            border: 0px;
        }
`]
})
export class AppComponent  {
    list: any[];
    constructor(private http: Http) {
        var lst1: Observable<any[]> = this.http.get("app/AngularDynamicTree/test.json").map((res: Response) => res.json());
        lst1.subscribe(data => {
            this.list = data;
        });
    }

    collapse(event: any, current: any) {
        myscript.collapsible(event, current);
    }
}

/// <reference path="myscript.d.ts" />

import { Component} from '@angular/core';

import { Http, Response } from '@angular/http';

import 'rxjs/add/operator/map';

import { Observable } from 'rxjs/observable';

import { TreeModel, NodeEvent } from 'ng2-tree';

@Component({

selector: 'my-app',

templateUrl: './template.html',

styles: [`

.collapse {

width: 10px;

height: 13px;

background-repeat: no-repeat;

background-position: -36px -17px;

display: inline-block;

cursor: pointer;

}

.expand {

width: 10px;

height: 13px;

background-repeat: no-repeat;

background-position: -50px -17px;

display: inline-block;

cursor: pointer;

}

ul li {

list-style: none;

}

ul li b {

margin-left: 15px;

}

.table > thead > tr > th, .table > tbody > tr > td {

border: 0px;

}

})

export class AppComponent {

list: any[];

constructor(private http: Http) {

var lst1: Observable<any[]> = this.http.get("app/AngularDynamicTree/test.json").map((res: Response) => res.json());

lst1.subscribe(data => {

this.list = data;

});

}

collapse(event: any, current: any) {

myscript.collapsible(event, current);

}

File: template.html

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

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

<h2>Normal Display</h2>
<ul>
    <ng-template #mylst1 let-list>
        <li *ngFor="let item of list" id="collapsetree">
            <span *ngIf="item.children.length == 0" style="margin-left: 13px"></span>

            <span *ngIf="item.children.length >0" class="collapse" #arrow (click)="collapse($event, arrow)"></span>
            {{item.value}}
            <ul style="display:none;">
                <ng-container *ngTemplateOutlet="mylst1; context:{ $implicit: item.children }"></ng-container>
            </ul>
        </li>
    </ng-template>
    <ng-container *ngTemplateOutlet="mylst1; context:{ $implicit: list }"></ng-container>
</ul>

<hr />
<h2>Display in table</h2>
<hr />

<ng-template #mylst let-lst>
    <li id="collapsetree">
        <span *ngIf="lst.children.length == 0" style="margin-left: 13px"></span>

        <span *ngIf="lst.children.length >0" class="collapse" #arrow (click)="collapse($event, arrow)"></span>
        {{lst.value}}
        <ul style="display:none;">
            <li *ngFor="let item of lst.children">
                <ng-container *ngTemplateOutlet="mylst; context:{ $implicit: item }"></ng-container>
            </li>
        </ul>
    </li>
</ng-template>


<table id="results" class="table table-striped" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Children</th>
    </thead>
    <tbody>
        <tr *ngFor="let lst of list">
            <td style="width: 157px;vertical-align:top;">
                <div class="parentCreatedDate"> {{lst.value}}</div>
            </td>
            <td>
                <ul>
                    <li>
                        <ng-container *ngTemplateOutlet="mylst; context:{ $implicit: lst }"></ng-container>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

<h2>Normal Display</h2>

<ul>

<ng-template #mylst1 let-list>

<span *ngIf="item.children.length >0" class="collapse" #arrow (click)="collapse($event, arrow)"></span>

<ng-container *ngTemplateOutlet="mylst1; context:{ $implicit: item.children }"></ng-container>

</ul>

</li>

</ng-template>

<ng-container *ngTemplateOutlet="mylst1; context:{ $implicit: list }"></ng-container>

</ul>

<hr />

<h2>Display in table</h2>

<hr />

<ng-template #mylst let-lst>

<span *ngIf="lst.children.length >0" class="collapse" #arrow (click)="collapse($event, arrow)"></span>

<ng-container *ngTemplateOutlet="mylst; context:{ $implicit: item }"></ng-container>

</li>

</ul>

</li>

</ng-template>

<thead>

<tr>

<th>Children</th>

</thead>

<tbody>

<div class="parentCreatedDate"> {{lst.value}}</div>

</td>

<td>

<ul>

<li>

<ng-container *ngTemplateOutlet="mylst; context:{ $implicit: lst }"></ng-container>

</li>

</ul>

</td>

</tr>

</tbody>

</table>

File: app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

@NgModule({

    imports: [BrowserModule, FormsModule, HttpModule],

    declarations: [AppComponent],

    bootstrap: [AppComponent],

})

export class AppModule {

}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

@NgModule({

imports: [BrowserModule, FormsModule, HttpModule],

declarations: [AppComponent],

bootstrap: [AppComponent],

})

export class AppModule {

}

File: main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

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

File: DynamicTree.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular Dynamic Tree</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="app/AngularDynamicTree/css/bootstrap.min.css" rel="stylesheet" />
    <script src="app/AngularDynamicTree/js/jquery-1.10.2.min.js"></script>
    <script src="app/AngularDynamicTree/js/bootstrap.min.js"></script>
    <script src="app/AngularDynamicTree/myscript.js"></script>
    

    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/AngularDynamicTree/main.js').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Angular Dynamic Tree</title>

System.import('app/AngularDynamicTree/main.js').catch(function (err) { console.error(err); });

</script>

</head>

<body>

<my-app>Loading...</my-app>

</body>

</html>

Output:

Date time picker in angular 2/4

November 27, 2017 admin847785456 3 Comments

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

 map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

      'moment': 'npm:moment',
      'ng2-bootstrap': 'npm:ng2-bootstrap',
    },

map: {

// our app is within the app folder

'app': 'app',

// angular bundles

'@angular/core': 'npm:@angular/core/bundles/core.umd.js',

'@angular/common': 'npm:@angular/common/bundles/common.umd.js',

'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

'@angular/http': 'npm:@angular/http/bundles/http.umd.js',

'@angular/router': 'npm:@angular/router/bundles/router.umd.js',

'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

// other libraries

'rxjs': 'npm:rxjs',

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

'moment': 'npm:moment',

'ng2-bootstrap': 'npm:ng2-bootstrap',

Now add these packages in the packages

      'moment': {
          main: './moment.js',
          defaultExtension: 'js'
      },
      "ng2-bootstrap": {
          main: "bundles/ngx-bootstrap.umd.js",
          defaultExtension: "js",
          formart: "cjs"
      },

'moment': {

main: './moment.js',

defaultExtension: 'js'

"ng2-bootstrap": {

main: "bundles/ngx-bootstrap.umd.js",

defaultExtension: "js",

formart: "cjs"

Step 3 : Import DatepickerModule, TimepickerModule in Root NgModule

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DatepickerModule, TimepickerModule } from 'ng2-bootstrap';

@NgModule({
    declarations: [
        MyComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        DatepickerModule.forRoot(),
        TimepickerModule.forRoot(),
    ],
    bootstrap: [MyComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { DatepickerModule, TimepickerModule } from 'ng2-bootstrap';

@NgModule({

declarations: [

MyComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

DatepickerModule.forRoot(),

TimepickerModule.forRoot(),

bootstrap: [MyComponent],

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

export class AppModule { }

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

import { Component,Input,Output,EventEmitter } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
<form>

 <div class="form-group">

      <div class="btn-group">

       <button type="button" class="glyphicon glyphicon-calendar btn btn-sm btn-default btn-secondary" 
       (mouseover)="toggleEndDatePicker()" ></button>

        <input type="text" ngControl="mydate" [ngModel]="mydate | date:'dd-MM-yyyy'" (focus)="showEndDatePicker = true; showStartDatePicker=false" class="btn btn-sm btn-default btn-secondary" name="date">

      </div>                       


      <div *ngIf="showEndDatePicker" class="datepicker" id="mypop" style="position: absolute;z-index: 4;">

           <datepicker [(ngModel)]="mydate" [minDate]="minDate" [showWeeks]="true" name="mydate" (mouseleave)="showEndDatePicker = false; showStartDatePicker=true"></datepicker>

      </div>

 <timepicker
      [(ngModel)]="initialValue"
      [hourStep]="hourStep"
      [minuteStep]="minuteStep"
      [showMeridian]="showMeridian"
      [readonlyInput]="disabled"
      [mousewheel]="mousewheel"
      [arrowkeys]="arrowkeys"
      [showSpinners]="showSpinners"
      [min]="min"
      [max]="max"
      name="aTimePicker"
      required
     style="padding-left:20px">
  </timepicker>

 </div>

</form>

{{mydate |date}} {{initialValue |date:'mediumTime'}}


`})

export class MyComponent {

    private minDate: Date = new Date();
    constructor(
    ) {
        (this.minDate = new Date()).setDate(this.minDate.getDate() - 150);
    }

    // code of date picker
    mydate: Date = new Date();
    private showStartDatePicker: boolean = false;
    private showEndDatePicker: boolean = false;
  
    private toggleEndDatePicker(): void {
        this.showEndDatePicker = !this.showEndDatePicker;
        this.showStartDatePicker = false;
    }

    //code for time picker
    initialValue: Date = new Date();
    hourStep: number = 1;
    minuteStep: number = 1;
    showMeridian: boolean = true;
    mousewheel: boolean = true;
    arrowkeys: boolean = true;
    showSpinners: boolean = true;
    min: Date;
    max: Date;
}

import { Component,Input,Output,EventEmitter } from '@angular/core';

@Component({

selector: 'my-app',

<form>

<button type="button" class="glyphicon glyphicon-calendar btn btn-sm btn-default btn-secondary"

(mouseover)="toggleEndDatePicker()" ></button>

</div>

</div>

<timepicker

[(ngModel)]="initialValue"

[hourStep]="hourStep"

[minuteStep]="minuteStep"

[showMeridian]="showMeridian"

[readonlyInput]="disabled"

[mousewheel]="mousewheel"

[arrowkeys]="arrowkeys"

[showSpinners]="showSpinners"

[min]="min"

[max]="max"

name="aTimePicker"

required

style="padding-left:20px">

</timepicker>

</div>

</form>

`})

export class MyComponent {

private minDate: Date = new Date();

constructor(

) {

(this.minDate = new Date()).setDate(this.minDate.getDate() - 150);

}

// code of date picker

mydate: Date = new Date();

private showStartDatePicker: boolean = false;

private showEndDatePicker: boolean = false;

private toggleEndDatePicker(): void {

this.showEndDatePicker = !this.showEndDatePicker;

this.showStartDatePicker = false;

}

//code for time picker

initialValue: Date = new Date();

hourStep: number = 1;

minuteStep: number = 1;

showMeridian: boolean = true;

mousewheel: boolean = true;

arrowkeys: boolean = true;

showSpinners: boolean = true;

min: Date;

max: Date;

}

Output: