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