Angular- Alternative of input.concat functionality

[davidsmith24]

Hello I want to update the input field by (click) functionality in Angular.

Here is my .html file

<div class="maindisplay"> 
          <input type="text" (keypress)="keyPressNumbers($event)" 
          class="subdisplay" minlength="1" name="calcData.calcInput" autofocus
          [(ngModel)]="calcData.calcInput"
           autocomplete="off" maxlength="60">

          <h3 class="answer" *ngIf="calcData.calcInput.length > 0">{{dynamicAnswer}}</h3> 

<div class="buttons">
        <div *ngFor="let arthmetic of arthmetics" class="row">
          <button class="btn btn-lg btn-outline-secondary col p-1 m-1" type="button" (click)="arthmetic.button1 === 'C' ? clearInput() : addOperation(arthmetic.button1)">{{arthmetic.button1}}</button>
          <button class="btn btn-lg btn-outline-secondary col p-1 m-1" type="button" (click)="addOperation(arthmetic.button2)">{{arthmetic.button2}}</button>
          <button class="btn btn-lg btn-outline-secondary col p-1 m-1" type="button" (click)="addOperation(arthmetic.button3)">{{arthmetic.button3}}</button>
          <button [ngClass]="arthmetic.button4 === '=' ? 'btn-blue btn-lg btn-outline-secondary col p-1 m-1' : 'btn btn-lg btn-outline-secondary col p-1 m-1'" 
          type="button" 
          (click)="arthmetic.button4 === '=' ? showResult(dynamicAnswer) : addOperation(arthmetic.button4)">{{arthmetic.button4}}
        </button>
        </div>
</div>

I want to develop the angular based calculator in that I want whenever user click on “=” button the answer is goes to input field after that answer should be updated like addition, subtraction etc…

Here is .ts file

 ngOnInit(){
    this.httpClient.get("assets/data.json").subscribe(data=>{
      this.arthmetics = data;
    })

    this.httpClient.get("assets/scientific-data.json").subscribe(data=>{
      this.scientific_data = data;
    })

    // this.showResult();  
  }

addOperation fuction which can perform the get value from

addOperation(operation: string) {
        const input = this.calcData.calcInput;
        const finalInput = input.concat(operation);
        this.calcData.calcInput = finalInput;
  }

The above function works fine when user add values first time after click on the “=” button this above gets error “input.concat is not a function”

showResult function which display the output.

 showResult() {
    this.calcData.result = this.calcService.calcBodmasRule(this.calcData.calcInput);
  }

get dynamicAnswer performs the direct calculation part and shows in display

get dynamicAnswer(){
    const data = this.calcService.calcBodmasRule(this.calcData.calcInput)
    return data;
  }