support a list of calculations in the frontend

frontend/src/app/app.component.html

@@ -3,5 +3,13 @@
 </div>
 
 <div class="content" role="main">
-  <app-calculator></app-calculator>
+  <div *ngFor="let c of calculators">
+    <app-calculator></app-calculator>
+    <button (click)="removeCalculator(c)">remove</button>
+    <hr>
+  </div>
+</div>
+
+<div class="content">
+  <button (click)="addCalculator()">add calculator</button>
 </div>

frontend/src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import {CalculatorComponent} from "./calculator/calculator.component";
+import {CalculatorService} from "./calculator.service";
 
 @Component({
   selector: 'app-root',
@@ -7,4 +9,17 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'Simple Calculator';
+  calculators : number[] = [0] ;
+  numCreated: number = 1;
+
+  addCalculator() {
+    let val = ++this.numCreated;
+    this.calculators.push(val);
+  }
+
+  removeCalculator(val : number) {
+    let index = this.calculators.indexOf(val);
+    this.calculators.splice(index, 1);
+  }
+
 }

frontend/src/app/calculator/calculator.component.html

@@ -12,8 +12,8 @@
   <button *ngFor="let operator of operators" (click)="calculate(operator)" id="{{operator}}">{{operator}}</button>
 </div>
 
-<div class="answer">
+<div class="answer" *ngIf="result != null">
 result = <span id="result">{{ result }}</span>
 </div>
 
-<div id="message">{{message}}</div>
+<div id="message" *ngIf="message.length != 0">{{message}}</div>

frontend/src/app/calculator/calculator.component.spec.ts

@@ -71,12 +71,11 @@ describe('CalculatorComponent', () => {
 
   it('should display result when Component.result changes', async () => {
     const dom = fixture.nativeElement;
-    const resultElement = dom.querySelector('#result');
 
     component.result = 37;
 
     fixture.detectChanges();
-    await expect(resultElement.textContent).toContain('37');
+    await expect(dom.querySelector('#result')).toContain('37');
   });
 
   it('should create', () => {

frontend/src/app/calculator/calculator.component.ts

@@ -9,7 +9,7 @@ import {CalculatorService} from "../calculator.service";
 export class CalculatorComponent implements OnInit {
   value1 : number = 0;
   value2 : number = 0;
-  result : number = 0;
+  result : number | null = null;
   message : string = "";
   operators : string[];
 
@@ -24,12 +24,10 @@ export class CalculatorComponent implements OnInit {
     console.log(this.value1 + " " + operator + " " + this.value2);
     this.calculatorService.calculate(operator, this.value1, this.value2).subscribe(
       (response) => {
-        this.message = "";
-        if (response.body != null) {
-          this.result = response.body;
-        }
+        this.result = response.body;
       },
       (error) => {
+        this.result = null;
         if (error.status == 400) {
           this.message = "invalid input: " + error.error;
         } else {