12 Oct 2018


Introduction of Angular4

Angular is open source platform for front-end web development.  It is basically used to make dynamic interactive web pages with the use of Single Page Applications (SPA). Angular is developed by the Angular team (which previously develops AngularJS) at Google.


Installation steps of Angular4

To work with Angular4 first we need to set up and configure the development environment.

Step 1:- First we need to install Node.js.

To install Node.js follow the link: –

Step 2:- Second step is to install CLI (Command Line Interface)

npm install –g @angular/cli

Step 3:- Next step is to create a new project.

ng new New-Project-Name

Step 4:- To open the page in browser

ng serve –open

Step 5:- Application will open on browser


Congrats!!!!  We are ready to make an Angular4 App.


Angular4 Components

Components are one of the most important features of Angular. A component basically refers to the classes which will communicate with the HTML file of the component. Components use a component decorator.

Create a new component:-

ng g component New-Component-Name

When we run this command some files are generated in New-Component-Name folder.

create   ../ New-Component-Name/ New-Component-Name.component.css (Define CSS etc)

create   ../ New-Component-Name/ New-Component-Name.component.html (Define HTML etc)

create   ../ New-Component-Name/ New-Component-Name.component.spec.ts (Define unit testing etc)

create   ../ New-Component-Name/ New-Component-Name.component.ts (Define Modules, properties etc)


After creating the new component, changes are also made in app.module.ts file


import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

import { New-Component-Name } from ‘./ New-Component-Name/ New-Component-Name.component’;


declarations: [


New-Component-Name   ],


Angular4 Event Binding

Event Binding is one of the most important concerns in graphical user forms application. When a user interacts with the application like as hover the mouse or click on the button, an event will generate. The generated event must be handled to perform some action.

Let us understand by a simple example.

Write the above code in app.component.html file.



<span *ngIf = “isTrue; then condition1 else condition2″>

Condition is valid.


<ng-template #condition1>Condition is valid</ng-template>

<ng-template #condition2>Condition is not valid</ng-template>


<button (click)=”myFunction($event)”>

Click Me



In this example we declare a button and add a function with name myFunction to its click event.

Now we define this function in app.component.ts file.


isTrue = true;

myFunction(event) {

alert(“Button is clicked”);



Example 2:- In this example we want to add change event in dropdown.

Step 1:- In app.comonent.html file


<div> Colors :

<select (change) = “changeColors($event)”>

<option *ngFor = “let i of colors”>{{i}}</option>




Step 2:-In app.component.ts file


changemonths(event) {

console.log(“Changed color from the Dropdown”);




Angular 4 Templates:-

HTML templates are basically used to define views. Templates are basically defined in the @Component decorator.

Angular 4 uses <ng-template> instead of <template > which was used in Angular 2. This is one of the major changes in Angular 4.

Let us understand by a simple example.

Write the following code in app.component.html file.



<span *ngIf = “isTrue;then firstCondition else secondCondition”>Condition is valid</span>

<ng-template # firstCondition >Condition is valid</ng-template>

<ng-template # secondCondition >Condition is not valid</ng-template>



In the above example we define if directive with two conditions. Both conditions are representing template in Angular.


In app.component.ts file

export class AppComponent





In the above example if the value of isTrue is true then “Condition is valid” message will print otherwise “Condition is not valid” will print. In this example we are using template for if condition.


What are Angular 4 Directives?

In Angular directive is basically a JavaScript class which is also shown by @directive. There are 3 types of directive available in Angular.

  • Component Directive,
  • Structural Directive and
  • Attribute Directive

What is Component Directive?

It is a type of directive which includes templates, logical part, and styles of the component. In this directive, we can use another directive also in the @Component section.

Let us understand by a simple example.


@Component ({

selector: “my-own-app”

directives: [use-any-custom-directive-here]



To use this directive in the view part:-



What is Structural Directive?

These directives are basically used to manipulate the DOM ( Document Object Model )  element. This directive is represented by the *sign before the directive.

Like as :- *ngIf , *ngFor


What is an Attribute Directive?

These types of the directive are basically used to change look and behavior of DOM element. In this section, we can make our own directives which are also called custom directives.


Let us understand by creating a simple custom directive.

We will create the custom directive with the help of command line.


Step 1:- ng g directive name-custom

This command will create two new files and update in the app.module.ts file.


create   name-custom.directive.spec.ts

create   name-custom.directive.ts

update app.module.ts file

After running this command some changes are made in the app.module.ts file which is shown below.

In app.module.ts file:-

import { NameCustomDirective } from ‘./name-custom.directive’;



declarations: [




Step 2:- In name-custom.directive class


import { Directive } from ‘@angular/core’;


selector: ‘[nameCustom]’



export class NameCustomDirective


constructor(Element : ElementRef)


console.log (Element);






In this directive, we have the selector with the name “nameCustom”. This name is used in the view file to apply the filter.

For Example:-


<span nameCustom>Welcome in the {{title}} World</span>



Output: – Welcome in the Angular World


In the above example, we make a custom tag with name “nameCustom” and use it any view file. The main function of the custom directive is to implement our own logic.


Angular Routing

Navigation between pages is basically achieved by Angular Routing. In Angular pages are basically refer to components. Angular also uses SPA (Single Page Application). SPA application is a type of web application which is basically fits on a single page. JavaScript, HTML and CSS code is accessed with a single page load.


To make use of Routing we have to include router module in app.module.ts


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

import { NgModule } from ‘@angular/core’;

import { RouterModule} from ‘@angular/router’;

import { AppComponent } from ‘./app.component’;

import { NewCmpComponent } from ‘./new-cmp/new-cmp.component’;


declarations: [




imports: [




path: ‘new-cmp’,

component: NewCmpComponent




providers: [],

bootstrap: [AppComponent]


export class AppModule { }


In this example the Router Module must be  imported from angular/router. RouterModule basically refers to the forRoot which takes an input as an array, which in turn has the object of the path and the component. Path is basically the name of the router and component is generally refereed the name of the class, i.e., the component created.


Let us see the component (new-cmp.component.ts) created file.


import { Component, OnInit } from ‘@angular/core’;



selector: ‘app-new-cmp’,

templateUrl: ‘./new-cmp.component.html’,

styleUrls: [‘./new-cmp.component.css’]



export class NewCmpComponent implements OnInit {

newcomponent = “Welcome in the world of Angular”;

constructor() {}

ngOnInit() { }



Now, if we want to show some content from the new component’s html file to be displayed whenever required or clicked from the main module then write the following code in app.module.ts


<p>Square root of 16 is: {{16 | sqrt}}</p><br/>

<p>Square root of 49 is: {{49 | sqrt}}</p>

<a routerLink = “new-cmp”>New component</a>



<router-outlet> tag is ensuring that HTML page of component should display the content when user click on the button.

Routing is one of the most important concepts in Angular to implement SPA application.


What is Angular Services?

In our application, sometimes we need that the specific code is available to all pages. Like as: – a data connection code that needs to be shared across various components. In that situation services play an important role.

Services are started at the beginning and are available throughout the life time of the application.

Below are the steps to create services in Angular.


Step1:- To create a service writes the following command in the command line.


ng g service myownservicehandler

This command will create two files.




The following code is written in the MyOwnService.ts file. 


import { Injectable } from ‘@angular/core’;


export class MyOwnServiceHandlerService


constructor() { }



In this class we will create our service function.

Injectable module is derived from @angular/core. This module has injectable () method.


Step2:- Now we assign the information of service in app.module.ts file.


import { MyOwnServiceHandlerService } from ‘./myownservicehandler.service’;

providers: [MyOwnServiceHandlerService],



Step3:- In this step we will create a function in service class.

Let us see a simple sample.

showDate() {

var todayDate = new Date();

return todayDate;


In this snippet we make a function with name showDate which will return date of today. 


Step 4:- The next step is to use this service method in app.component.ts file.


export class AppComponent {


constructor(private serviceImplement: MyOwnServiceHandlerService) {}

ngOnInit() {

this. todayDate = this. serviceImplement.showTodayDate();




A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any additional initialization tasks.


Step 5:- In the last to show the result of service method in view (eg: – HTML file)

We will use the variable with Curly brackets.



So, service help in Angular application to access same functionality across components.Services are widely used in Angular application.

Service is the most important concept in any language.