Calculation module using 2 way data binding without any click

Question

I started a new web project for a company and decided to use Angular Cli.

One of their need is to have a calculation module in order to help customers to calcul their potential salary.

So I created a simulation component with a simple View ( a form with 3 input).

Here is a part of the simulation.component.html with one of my 3 input and the 2 way Data Binding which work. The calcul are over simplified but I'll adjust them later.

<div class="container">
<form>
    <div class="row">
      <div class="col-lg-6">
        <div class="md-form">
          <input [(ngModel)]= "chiffreAffaire" mdbActive type="number" id="form1" class="form-control" [ngModelOptions]="{standalone: true}">
          <label for="form1" class="">Chiffre d'affaire Hors tax (Mensuel)</label>
        </div>
      </div>
    </div>

<p> CA : {{chiffreAffaire}}</p>
<p> RESULT : {{chiffreAffaire*2}}</p>

Like you can see I put my calcul directly in my HTML Balise and that can't be a good solution ! In fact if the calcul was that simple it may be ok but I'll need to add some condition in terms of amounts.

Tell me if it's not the best practice but in my opinion, what I need to do is to add a function in my simulation.component.ts which will make the calcul and call it in my p balise.

I know that it's possible to call a function with a click on a button but they asked me to make this 100% dynamic, they just want the function to be applied each time the user modify the input.

So I thought about something like that <p>{{calcul()}} with a calcul() function in my simulation.component.ts file

import { Component, Input, Output,EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'app-simulation',
  templateUrl: './simulation.component.html',
  styleUrls: ['./simulation.component.scss']
})

export class SimulationComponent implements OnInit {

   @Input() chiffreAffaire: number ;

  calcule()
  {
    this.chiffreAffaire = this.chiffreAffaire*2;
  }
  constructor() { }

  ngOnInit() {
  }

}

but it clearly don't work.

Answer 1

If I understand you correctly you need to add a (change) function to your input or break your ng model up

have a look at this response here:

onchange equivalent in angular2