CODEWITHSUNDEEP
javascriptangulartypescript
David J.
David J.

Reputation: 23

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

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!

Upvotes: 2

Views: 3836

Answers (2)

Tomasz Kula
Tomasz Kula

Reputation: 16837

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

Upvotes: 1

bugs
bugs

Reputation: 15313

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.

Upvotes: 0

Related Questions