Simple CRUD operation using AngularJS2

In this example we had use JAVA Serlvet techonologies to work as middle ware to deal with oracle database.

Frontend is developed in AngularJS2.

AngularJS2 --> Servlet --> Oracle DB

we had created Servlet using Eclipse dynamic web project

Folder Structure

Code :-
1:- SiddhuCrudDao

/**
* 
*/
package com.siddhu.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.text.ParseException;

import com.siddhu.dbconnection.OracleDbConnection;
import com.siddhu.model.Product;
public class SiddhuCrudDao {

private Connection connection;
private int result;

public SiddhuCrudDao() {
connection = OracleDbConnection.getConnection();
}

public int addUser(Product product) {
try {

PreparedStatement preparedStatement = connection
.prepareStatement("insert into \"SIDDHU\".\"PRODUCT\"(NAME,QTY) values (?,?)");
preparedStatement.setString(1, product.getName());
preparedStatement.setString(2, product.getQty());
result= preparedStatement.executeUpdate();

} catch (SQLException e) {
e.printStackTrace();
}
return result;
}

public int deleteUser(String name) {
try {
PreparedStatement preparedStatement = connection
.prepareStatement("delete from SIDDHU.PRODUCT where name=?");
preparedStatement.setString(1, name);
result= preparedStatement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
return result;
}

public int updateUser(Product product) throws ParseException {
try {
PreparedStatement preparedStatement = connection
.prepareStatement("update SIDDHU.PRODUCT set qty=?" +
" where name=?");
preparedStatement.setString(1, product.getQty());
preparedStatement.setString(2, product.getName());
result= preparedStatement.executeUpdate();

} catch (SQLException e) {
e.printStackTrace();
}
return result;
}

public Product getUserById(String name) {
Product user = new Product();
try {
PreparedStatement preparedStatement = connection.
prepareStatement("select * from SIDDHU.PRODUCT where name=?");
preparedStatement.setString(1, name);
ResultSet rs = preparedStatement.executeQuery();

if (rs.next()) {
user.setName(rs.getString("name"));
user.setQty(rs.getString("qty"));
}
} catch (SQLException e) {
e.printStackTrace();
}
return user;
}

/*public static void main(String args[])
{
SiddhuCrudDao objSiddhuCrudDao = new SiddhuCrudDao();
User user=new User();
user.setName("sidhu");
user.setQty("1");
objSiddhuCrudDao.addUser(user);
}*/

}

2:- OracleDbConnection

package com.siddhu.dbconnection;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Properties;

public class OracleDbConnection {

private static Connection connection = null;

public static Connection getConnection() {
if (connection != null)
return connection;
else {
try {
Properties prop = new Properties();
//InputStream inputStream = DBUtility.class.getClassLoader().getResourceAsStream("/config.properties");
//InputStream inputStream = DBUtility.class.getClassLoader().getResourceAsStream("config.properties");
InputStream inputStream = OracleDbConnection.class.getClassLoader().getResourceAsStream("config.properties");
prop.load(inputStream);
String driver = prop.getProperty("driver");
String url = prop.getProperty("url");
String user = prop.getProperty("user");
String password = prop.getProperty("password");
Class.forName(driver);
connection = DriverManager.getConnection(url, user, password);

/*// Store the database URL in a string
String serverName = "127.0.0.1";
String portNumber = "1521";
String sid = "XE";
String dbUrl = "jdbc:oracle:thin:@" + serverName + ":" + portNumber
+ ":" + sid;

Class.forName("oracle.jdbc.driver.OracleDriver");
// set the url, username and password for the database
connection = DriverManager.getConnection(dbUrl, "siddhu", "siddhu"); */

} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return connection;
}

}

public static void main(String[] args) {
// TODO Auto-generated method stub
//System.out.println("----------:"+OracleDbConnection.getConnection());

}

}

3:- Product

package com.siddhu.model;
public class Product {

private String name;
private String qty;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getQty() {
return qty;
}

public void setQty(String qty) {
this.qty = qty;
}


@Override
public String toString() {
return "User [name=" + name + ", qty=" + qty + "]";
}

}

4:- AngularJSServlet

package com.siddhu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.siddhu.dao.SiddhuCrudDao;
import com.siddhu.model.Product;

/**
* Servlet implementation class AngularJSServlet
*/
@WebServlet("/AngularJSServlet")
public class AngularJSServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public AngularJSServlet() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String method = request.getParameter("method");
if("add".equalsIgnoreCase(method))
{
String name = request.getParameter("name");
String qty = request.getParameter("qty");
SiddhuCrudDao objSiddhuCrudDao = new SiddhuCrudDao();
Product user=new Product();
user.setName(name);
user.setQty(qty);
objSiddhuCrudDao.addUser(user);
/*PrintWriter out = response.getWriter();
out.println("Add opertion called successfully on client side:");*/

}
else if("delete".equalsIgnoreCase(method))
{
String name = request.getParameter("name");
String qty = request.getParameter("qty");
SiddhuCrudDao objSiddhuCrudDao = new SiddhuCrudDao();
objSiddhuCrudDao.deleteUser(name);
/*PrintWriter out = response.getWriter();
out.println("Add opertion called successfully on client side:");*/
}

else if("update".equalsIgnoreCase(method))
{
try {
String name = request.getParameter("name");
String qty = request.getParameter("qty");
SiddhuCrudDao objSiddhuCrudDao = new SiddhuCrudDao();
Product user=new Product();
user.setName(name);
user.setQty(qty);

objSiddhuCrudDao.updateUser(user);
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

else
{
String name = request.getParameter("name");
SiddhuCrudDao objSiddhuCrudDao = new SiddhuCrudDao(); 
Product user=new Product();
user = objSiddhuCrudDao.getUserById(name);
System.out.println("reached here:"+user.toString());
PrintWriter out = response.getWriter();
out.write("name = "+user.getName()); 
out.write("qty = "+user.getQty()); 
}

//response.getWriter().append("Served at: ").append(request.getContextPath());

}

}

Execute above servlet web app on tomcat so that it can be called from AngularJS2 applcation.

AngularJS2 Project Screen shot

Code:

1:- app.component.spec.ts

/* tslint:disable:no-unused-variable */

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
});
TestBed.compileComponents();
});

it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));

it(`should have as title 'app works!'`, async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));

it('should render title in a h1 tag', async(() => {
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
});

2:- app.component.ts

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

import { SiddhuServletService } from './siddhu-servlet.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Performing CRUd Opeartion using Servlet in AngularJS2';

getServletAddResponse:string;
getServletDeleteResponse:string;
getServletUpdateResponse:string;
getServletGetResponse:string;


constructor(private siddhuservletservice: SiddhuServletService) { }

addProduct(method:string, name:string, qty:string) {
console.log('updateUser-'+method);
console.log('deleteUser-'+name);
console.log('deleteUser-'+qty);

this.siddhuservletservice
.addProduct(method, name, qty).subscribe(
data => this.getServletAddResponse = data, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Add Job Done Get !")//run this code in all cases
);
}



deleteProduct(method:string, name:string, qty:string) {
console.log('updateUser-'+method);
console.log('deleteUser-'+name);
console.log('deleteUser-'+qty);

this.siddhuservletservice
.deleteProduct(method, name).subscribe(
data => this.getServletDeleteResponse = data, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Delete Job Done Get !")//run this code in all cases
);
}


updateProduct(method:string, name:string, qty:string) {
console.log('updateUser-'+method);
console.log('updateUser-'+name);
console.log('updateUser-'+qty); 

this.siddhuservletservice
.updateProduct(method, name,qty).subscribe(
data => this.getServletUpdateResponse = data, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Update Job Done Get !")//run this code in all cases
);
}


getProduct(method:string, name:string) {
console.log('updateUser-'+method);
console.log('deleteUser-'+name);

this.siddhuservletservice
.getProduct(method, name).subscribe(
data => this.getServletGetResponse = data, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Get Job Done Get !")//run this code in all cases
);
}
}

3:- app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SiddhuServletService } from './siddhu-servlet.service';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [SiddhuServletService],
bootstrap: [AppComponent]
})
export class AppModule { }

4:- siddhu-servlet.service.ts

import { Injectable } from '@angular/core';
import {Http, Response, Headers, Request, RequestOptions, RequestMethod, URLSearchParams} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/Rx';

@Injectable()
export class SiddhuServletService {


private getServletUrl = 'http://localhost:8181/CRUDUsingAngularJS/AngularJSServlet'; // URL to web api



constructor(private _http: Http) { 

}

//To Add User in the database.
addProduct(method: string, name: string, qty: string){

let params: URLSearchParams = new URLSearchParams();
params.set('method', method);
params.set('name', name);
params.set('qty', qty);


//const url = `${this.getServletUrl}/${id}`; 

return this._http.get(this.getServletUrl, {
search: params
})
.map(response => response.text());
}


//To Delete in the database.
deleteProduct(method: string, name: string){
// const deleteServlerURL = `${this.getServletUrl}/${name}`;
let params: URLSearchParams = new URLSearchParams();
params.set('method', method);
params.set('name', name);

return this._http.get(this.getServletUrl, {
search: params
})
.map(response => response.text());
}

//To Update in the database.
updateProduct(method: string, name: string,qty: string){
let params: URLSearchParams = new URLSearchParams();
params.set('method', method);
params.set('name', name);
params.set('qty', qty);
return this._http.get(this.getServletUrl, {
search: params
})
.map(response => response.text());
}


//To getUser from id from the database.
getProduct(method: string, name: string){
//const getUserServlerURL = `${this.getServletUrl}/${name}`; 
let params: URLSearchParams = new URLSearchParams();
params.set('method', method);
params.set('name', name);
return this._http.get(this.getServletUrl, {
search: params
})
.map(response => response.text());
}


}

5:- app.component.html

<!--div>
<!--h1>{{title}}<!--/h1>

<!--div>
<!--label>Name: <!--/label> <!--input [(ngModel)]="name"
placeholder="name" />
<!--/div>


<!--div>
<!--label>Quantity: <!--/label> <!--input [(ngModel)]="qty"
placeholder="qty" />
<!--/div>

<!--div>
<!--button (click)="addProduct('add', name, qty)">Calling servlet to
add user<!--/button>
<!--/div>

<!--div>
<!--label>The result after Add<!--/label> {{getServletAddResponse}}
<!--/div>

<!--div>
<!--button (click)="deleteProduct('delete',name)">Calling servlet
to Delete user<!--/button>
<!--/div>

<!--div>
<!--label>The result after Delete<!--/label> {{getServletDeleteResponse}}
<!--/div>

<!--div>
<!--button (click)="updateProduct('update',name,qty)">Calling servlet
to Update user<!--/button>
<!--/div>

<!--div>
<!--label>The result after Update<!--/label> {{getServletUpdateResponse}}
<!--/div>

<!--div>
<!--button (click)="getProduct('getuser',name)">Calling servlet to
get user as per name<!--/button>
<!--/div>

<!--div>
<!--label>The result after GetUser<!--/label> {{getServletGetResponse}}
<!--/div>
<!--/div>

UI Screen of AngularJS2 on Browser

ORA-28001: the password has expired

when ever u are facing below error execute following step to bypass it.

An error was encountered performing the requested operation:

ORA-28001: the password has expired
28001. 00000 - "the password has expired"
*Cause: The user's account has expired and the password needs to be
changed
*Action: change the password or contact the DBA
Vendor code 28001

Step 1:- We are using SQLDeveloper else u can also use the command prompt

Right click on Connections > New Connection.

Connection Name: LOCALHOST
Username: SYSTEM
Password: (or your sys password)
Hostname: your database server IP
Port: 1521
SID: your sid
click connect.

Step 2:- Expand other users, and choose the user with the expired password.

Step 3:- Right click and "edit" the user, enter the new password and uncheck Passowrd Expired check box and confirm it.

Either follow this steps
https://shdhumale.wordpress.com/2016/03/14/ora-28002-the-password-will-expire/

Calling SOAP Service with AngularJS2

Before starting this please refer to this site

http://siddharathadhumale.blogspot.in/2017/01/angularjs2-rest-json-call-example.html

Now Lets try to consume SOAP Response using AngularJS2

Following are the changes made in the files

Step 1:- app.component.html

<!--button (click)="getSoapResponse()">Call SOAP Service<!--/button>

<!--div>

<!--label>SOAP Web Service Call http://10.38.113.143:8088/mockExposeWebServiceSoap11Binding: <!--/label>

{{ getSoapWebResponse }} 

<!--/div>

Step 2:- app.component.ts

getSoapResponse() {
this.siddhurestservice
.getSoapResponse().subscribe(
data => this.getSoapWebResponse = data, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Job Done Get !")//run this code in all cases
);

}

Step 3:- siddhu-rest-service.service.ts

getSoapResponse(){
let options = new RequestOptions({
method: RequestMethod.Post,
url: this.getSoapResponseurl,
body: this.body
});

return this._http.request(new Request(options))
.map(this.extractData);


}

private extractData(res: Response) {
let body = res.text();
console.log(res.toString());
console.log(body);
return body;
}
Project Structure

AngularJS2 REST JSON Call Example

This example show you how to call REST JSON response with AngularJS2

In this example we are using Eclipse IDE and REST JSON service from
http://services.groupkt.com/country/get/all
http://services.groupkt.com/country/get/iso2code/IN

Step 1:- Create an angularJS2 project in eclipse

right click --> New --> Other-->AngularJs2 project--> Give the name of the project

Above step will create and base project with node-module folder inside our project.

Step 2:- Lets create an service which is used to make an REST Call i.e. siddhu-rest-service.service.ts

In code we are using the concept of observable and map so import following below line inside the code.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

we are expecting the result in the form of JSON

getAllCountry(){
return this._http.get(this.getAllUrl)
.map(response => response.json());

}
Step 3:- Add newly created service inside at app.modules.ts so that it can be available to whole project

import { SiddhuRestServiceService } from './siddhu-rest-service.service';
providers: [SiddhuRestServiceService],

Step 4:- Modfiy html file to show the JSON response on the screen

<!--button (click)="getAllCountry()">Call Country Code Web Service<!--/button>

<!--label>The result after Post<!--/label> {{getJSONResponse}}

<!--div>
<!--label>Country Code: <!--/label> <!--input [(ngModel)]="countrycode"
placeholder="countrycode" />
<!--/div> 

<!--button (click)="getIsoofCountry(countrycode)">Call Country Code Web Service<!--/button>
<!--div>
<!--label>REST Response of http://services.groupkt.com/country/get/iso2code: <!--/label>
{{ getCountryCodeJSONResponse }}
<!--/div>

<!--/div>

2:- siddhu-rest-service.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class SiddhuRestServiceService {

private headers = new Headers({'Content-Type': 'application/json'});
private getAllUrl = 'http://services.groupkt.com/country/get/all'; // URL to web api

private getISOCode = 'http://services.groupkt.com/country/get/iso2code'; 
constructor(private _http: Http) { 

}

// getAllCountry(): Promise<{}> {
getAllCountry(){
/* console.log(this._http.get(this.getAllUrl)
.toPromise()
.then(response => response.json())
.catch(this.handleError));*/
// .map(response => response.json()));
/* return this._http.get(this.getAllUrl)
.toPromise()
.then(response => response.json().data)
.catch(this.handleError);*/
return this._http.get(this.getAllUrl)
.map(response => response.json());

}

// getIsoofCountry(id: string): Promise<{}> {
getIsoofCountry(id: string) {
const url = `${this.getISOCode}/${id}`;
/* console.log(this._http.get(url)
.toPromise()
.then(response => response.json())
.catch(this.handleError));*/
/*return this._http.get(url)
.toPromise()
.then(response => response.json().data)
.catch(this.handleError);*/
return this._http.get(url)
.map(response => response.json());

}

private handleError(error: any) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}



}

3:- app.component.ts

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

import { SiddhuRestServiceService } from './siddhu-rest-service.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {

getJSONResponse:string;
getCountryCodeJSONResponse:string;

constructor(private siddhurestservice: SiddhuRestServiceService) { }

title = 'Calling REST Web service using AngularJS2';

getAllCountry() {
this.siddhurestservice
.getAllCountry().subscribe(
data => this.getJSONResponse = JSON.stringify(data), // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Job Done Get !")//run this code in all cases
);
}

getIsoofCountry(id : string) { 
console.log(id);

this.siddhurestservice
.getIsoofCountry(id).subscribe(
data => this.getCountryCodeJSONResponse = JSON.stringify(data), // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("Job Done Get !")//run this code in all cases
);
}

}

4:- app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SiddhuRestServiceService } from './siddhu-rest-service.service';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [SiddhuRestServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }

Simple Addition/Substration/Multiplication/Division Example using AngularJS2

Tool Used:-
Eclipse with AngularJS2 plugin
Chrome Browser

AngularJS2 is Typescript language i.e. developer write the code in Typescript language and at run time it get converted into JAVA script to display result on screen.

Here we are trying to create a simple angularJS2 example that shows us add,sub,multiplication and division.

We are using Routing concept as we have created 4 tab one for each operation

Step 1:- Create AngularJS2 Project with name i.e. AddSunDivMultiProject

Step 2:- Execute above created project i.e. right click on project --> Run as --> ng serve

open this url on browser http://localhost:4200

This will show defualt project screen on the browser.

Step 3:- Now create a new component for Add functionality i.e. right click on project --> new -> other --> AngularJS2--> Component

This will create folder with our name provided by us along with three files

1- *.ts :- Code to have logic
2- *.html :- Code to display the page
3- *.css :- To give look and feel to our html files.

Folder Structure

Files

1:- add-component.component.ts

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

//import { NumberEnter } from './number-enter';

@Component({
selector: 'app-add-component',
templateUrl: './add-component.component.html',
styleUrls: ['./add-component.component.css']
})
export class AddComponentComponent implements OnInit {

answer : number;

constructor() { }

ngOnInit() {
}

addNumber(firstnumber, secondnumber) {
console.log(firstnumber)
console.log(secondnumber)
var myFirstNumber = +firstnumber
var mySecondNumner = +secondnumber
this.answer = myFirstNumber + mySecondNumner;
console.log(this.answer)

}

getAnswer()
{
return this.answer;
}

}

2- add-component.component.html

<!--div>
<!--h2>Add Number Screen!<!--/h2>
<!--div>
<!--label>firstnumber: <!--/label> <!--input
[(ngModel)]="firstnumber" placeholder="firstnumber" />
<!--/div>
<!--div>
<!--label>secondnumber: <!--/label> <!--input [(ngModel)]="secondnumber"
placeholder="secondnumber" />
<!--/div>

<!--button (click)="addNumber(firstnumber, secondnumber)">Add Number<!--/button>
<!--div>
<!--label>Answer: <!--/label>
<!--input type="text" value='{{ getAnswer() }}' />
<!--/div>

<!--/div>

Imply the same logic expect the operator in all other sub,div and multilication fies.

3- app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AddComponentComponent } from './add-component/add-component.component';
import { SubComponentComponent } from './sub-component/sub-component.component';
import { DivComponentComponent } from './div-component/div-component.component';
import { MultiComponentComponent } from './multi-component/multi-component.component';

const routes: Routes = [
{ path: '', redirectTo: '/addcomponent', pathMatch: 'full' },
{ path: 'addcomponent', component: AddComponentComponent },
{ path: 'subcomponent', component: SubComponentComponent },
{ path: 'divcomponent', component: DivComponentComponent },
{ path: 'multicomponent', component: MultiComponentComponent }
];

@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

5 :- app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

import { AppRoutingModule } from './app-routing.module';
import { AddComponentComponent } from './add-component/add-component.component';
import { SubComponentComponent } from './sub-component/sub-component.component';
import { DivComponentComponent } from './div-component/div-component.component';
import { MultiComponentComponent } from './multi-component/multi-component.component';

@NgModule({
declarations: [
AppComponent,
AddComponentComponent,
SubComponentComponent,
DivComponentComponent,
MultiComponentComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],

providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

6:- app.component.html

<!--h1>{{title}}<!--/h1>
<!--nav>
<!--a routerLink="/addcomponent" routerLinkActive="active">Addition<!--/a>
<!--a routerLink="/subcomponent" routerLinkActive="active">Subtraction<!--/a>
<!--a routerLink="/multicomponent" routerLinkActive="active">Multiplication<!--/a>
<!--a routerLink="/divcomponent" routerLinkActive="active">Division<!--/a>
<!--/nav>
<!--router-outlet><!--/router-outlet>

7:- app.component.css
h1 {
font-size: 1.2em;
color: #999;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
padding-top: 0;
}
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.active {
color: #039be5;
}

Run application right click on project --> run as --> ng serve