Make Calculator Using an Angular Dropdown

Question

Some of you may have seen that I’ve been doing angular study since the zero... I thought of making a calculator using a dropdown to already work the Binding features

The point is I can’t get the value to get to the screen:

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

@Component({
  selector: 'app-modulo-fixacao',
  templateUrl: './modulo-fixacao.component.html',
  styleUrls: ['./modulo-fixacao.component.css']
})
export class ModuloFixacaoComponent {

  value1: number;
  value2: number;
  result: number;

  constructor() { }

  sum() {
    this.result = Number(this.value1) + Number(this.value2);
  }

  sub() {
    this.result = Number(this.value1) - Number(this.value2);
  }

  mult() {
    this.result = Number(this.value1) * Number(this.value2);
  }

  div() {
    if (Number(this.value2) != 0) {
      this.result = Number(this.value1) / Number(this.value2);
    }
    else{
      alert('Não é possivel efetuar divisão por 0');
    }
  }

}

<h3>Programming a Calculator with Angular</h3>

<br><br>

Digite o primeiro valor: <input type="text" 
[(ngModel)]="value1"/>
Digite o segundo valor: <input type="text"
[(ngModel)]="value2" />

<select #classe (change)="0">
  <option value="soma">Soma</option>
  <option value="sub">Sub</option>
  <option value="mult">Multiplicação</option>
  <option value="div">Divisão</option>
</select>

<!--Nao consigo achar um meio de passar os resultados ate a tela-->

Answer 1

Well first I created a function that receives as parameter the operation that the user wants to do, and added in html a tag p that receives the variable result, after filling this variable the value is displayed inside the tag p.

<h3>Programming a Calculator with Angular</h3>

Digite o primeiro valor: <input type="text" 
[(ngModel)]="value1"/>
Digite o segundo valor: <input type="text"
[(ngModel)]="value2" />

<select #classe [(ngModel)]="conta" (change)="execute(conta)">
  <option value="soma">Soma</option>
    <option value="sub">Sub</option>
    <option value="mult">Multiplicação</option>
    <option value="div">Divisão</option>
  </select>

<p>{{result}}</p>

Note the function execute():

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

@Component({
selector: 'app-modulo-fixacao',
templateUrl: './modulo-fixacao.component.html',
styleUrls: ['./modulo-fixacao.component.css']
})
  export class ModuloFixacaoComponent {
  value1: number;
  value2: number;
  result: number;
  conta: any;

  constructor() { }

  execute(operacao){

switch(operacao){
  case 'soma':
    this.sum()
  break

  case 'div':
    this.div()
  break

  case 'mult':
    this.mult()
  break

  case 'sub':
    this.sub()
  break
}
  }

  sum() {
    this.result = Number(this.value1) + Number(this.value2);
  }

  sub() {
    this.result = Number(this.value1) - Number(this.value2);
  }

  mult() {
    this.result = Number(this.value1) * Number(this.value2);
  }

  div() {
    if (Number(this.value2) != 0) {
      this.result = Number(this.value1) / Number(this.value2);
    }
    else{
      alert('Não é possivel efetuar divisão por 0');
    }
  }
}    

I left an example here for you to take a look at: https://stackblitz.com/edit/angular-khuorg