Create Basic Calculator using Angular2

Setup Angular 2 Repo

https://github.com/angular/quickstart

In app.module.ts

import FormsModule as we need to use two way data binding

After making changes

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

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

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

In app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: '/app/app.component.html',
})
export class AppComponent  {
  inputOne: number = 0;
  inputTwo: number = 0;
  result: number = 0;
  operations: any[] = [
    {id: '+', name: '+'},
    {id: '-', name: '-'},
    {id: '*', name: '*'},
    {id: '/', name: '/'}
  ];

  performOperation(operation) {
    if(!this.inputOne || !this.inputTwo) {
      alert('Please filled Input');
      return false;
    }
    if(operation == '+') {
      this.result = this.inputOne  + this.inputTwo;
    } else if (operation == '-') {
      this.result = this.inputOne  - this.inputTwo;
    } else if (operation == '*') {
      this.result = this.inputOne  * this.inputTwo;
    } else {
      this.result = this.inputOne  / this.inputTwo;
    }
  }
}

create app.component.html file inside app folder


In app.component.html



<div class="row">
  <div class="col-md-2 col-md-offset-5">
    <h1>Calculator</h1>
    <p><input type="number" [(ngModel)] = "inputOne"/></p>
    <p><input type="number" [(ngModel)] = "inputTwo"/></p>
    <p>
      <select #selectOperation>
        <option *ngFor="let operation of operations" [value]="operation.id">{{ operation.name}}</option>
      </select>
    </p>
    <button type="submit" class="btn btn-primary" (click) = "performOperation(selectOperation.value)">SUBMIT</button>
    <h3>Result : {{ result }}</h3>
  </div>
</div>




In index.html

add this for using bootstrap

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">