Get values from inputs after click and calculate it - Angular 5

Question

I want to write a function with get two values from two inputs and calculate something like BMI (Body Mass Index). My HTML file:

<div class="input-group mb-3 weight-div col-6">
    <div class="input-group-prepend">
        <span class="input-group-text">Weight</span>
    </div>
    <input ng-model="weight" type="text" class="form-control" placeholder="[kg]" aria-label="Waga[kg]" aria-describedby="basic-addon1">
</div>


<div class="input-group mb-3 growth-div col-6">
    <div class="input-group-prepend">
        <span class="input-group-text">Growth</span>
    </div>
    <input ng-model="growth" type="text" class="form-control" placeholder="[m]" aria-label="Wzrost[m]" aria-describedby="basic-addon1">
</div>

<button (click)="calculate()" type="button" class="btn btn-primary btn-sm ml-3">Large button</button>

<div class="alert alert-dark" id="result" role="alert">
</div>

My TS file:

import { Component, OnInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
    selector: 'app-inputs',
    templateUrl: './inputs.component.html',
    styleUrls: ['./inputs.component.css'],

})

export class InputsComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    calculate() {
    }
}

What should I write in function calculate () to see get values from weight and growth inputs and how can I export for example value from variable bmi to div id="result" ? Thanks for help!

Tomasz Kula · Accepted Answer · 2018-04-13 14:07:49Z

1

Take advantage of Angular's two way data binding with [(ngModel)]. This way you do not even need the calculate function, and can get the calculation preview in real time.

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

@Component({
  selector: 'my-app',
  template:`
  <input [(ngModel)]="mass" placeholder="mass" />
  <input [(ngModel)]="height" placeholder="height" />
  <div *ngIf="mass && height"> {{ bmi }} </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  mass = 0;
  height = 0;

  get bmi() {
    return this.mass / Math.pow(this.height, 2);
  }
}

Live demo

answered Apr 13, 2018 at 14:07

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomasz Kula Over a year ago

Glad I could help. Please consider upvoting and accepting my answer if you think it was helpful :)

David J. Over a year ago

I have got something like this now:

import { Component, OnInit } from '@angular/core'; import { NgModel } from '@angular/forms'; import { FormsModule } from '@angular/forms';  @NgModule({   imports: [     FormsModule   ], })  [...]  export class InputsComponent {     weight = 0;     height = 0;      get bmi() {         return this.weight / Math.pow(this.height, 2);     } }

With [(ngModel)]="weight" and [(ngModel)]="growth", but I have got ReferenceError: NgModule is not defined. Could You help with this?

bugs · Accepted Answer · 2018-04-13 14:04:32Z

0

Use two way data binding on your weight and growth properties and simply pass them as argument to your calculate function.

<div class="input-group mb-3 weight-div col-6">
    <div class="input-group-prepend">
        <span class="input-group-text">Weight</span>
    </div>
    <input [(ngModel)]="weight" type="text" class="form-control" placeholder="[kg]" aria-label="Waga[kg]" aria-describedby="basic-addon1">
</div>


<div class="input-group mb-3 growth-div col-6">
    <div class="input-group-prepend">
        <span class="input-group-text">Growth</span>
    </div>
    <input [(ngModel)]="growth" type="text" class="form-control" placeholder="[m]" aria-label="Wzrost[m]" aria-describedby="basic-addon1">
</div>

<button (click)="calculate(weight, growth)" type="button" class="btn btn-primary btn-sm ml-3">Large button</button>

<div class="alert alert-dark" id="result" role="alert">
</div>

and:

calculate(weight, growth) {
  console.log(weight, growth)
}

Demo

Then modify your calculate function to actually do something useful.

answered Apr 13, 2018 at 14:04

bugs

15.4k6 gold badges53 silver badges55 bronze badges

1 Comment

bugs Over a year ago

@DavidJ. glad it helped, feel free to mark the answer as accepted if you think it can help other people in the future

Collectives™ on Stack Overflow

Get values from inputs after click and calculate it - Angular 5

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related