Angular 4 passing data to html

Question

main.component.html

<form (submit)="onSubmit()">
    height:
    <input type="number" name="height" [(ngModel)]="user.height">
    <br><br>
    Weight:
    <input type="number" name="weight"[(ngModel)]="user.weight">
    <br><br>
    <input type="submit">
</form>

<h5 *ngFor="let user of users">

    {{user.score}}

</h5>

main.component.ts

export class MainComponent implements OnInit {
    users = [];

    user = {
        height: 0,
        weight: 0,
    };

    onSubmit() {
        console.log(this.user.height);
        console.log(this.user.weight);

        var score = this.user.weight * this.user.height;
        this.users.push(score);

        console.log(score);


        this.user = {
            height: 0,
            weight: 0
        }
    }
}

this.user.weight and this.user.height are multiplied and saved in var score. But how do I pass the var score to show in my main.component.html? I tried to push score in users array but its not showing up in my main.component.html.

you don't have a member score in user. add it and store the calculated value to it. — Sagar V
– Sagar V, Commented Sep 20, 2017 at 10:15
You're using TypeScript, but you'rte not using types anywhere. Specify the types of your variables, and the compiler will tell you what you're doing wrong. users is supposed (I guess) to be an array of users (so Array<User>), but you're pushing scores to this array (of type number). You're supposed to display the score of each user, but you don't have any score in the users. Also, your code is not indented, making it very hard to read. This is all basic stuff. Learn and apply the basics. — JB Nizet
– JB Nizet, Commented Sep 20, 2017 at 10:18

Salim Ibrohimi · Accepted Answer · 2017-09-20 10:17:25Z

2

Don't push it into users; remove var and use this.score = this.user.weight * this.user.height, and then in Your main...html you can use as {{score}}

answered Sep 20, 2017 at 10:17

Salim Ibrohimi

1,4113 gold badges19 silver badges38 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-09-20 10:16:32Z

1

score is not a object , it should be

<div *ngFor="let user of users">
<h1>{{user }}</h1>
</div>

edited Sep 20, 2017 at 10:16

answered Sep 20, 2017 at 10:13

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

Sagar V Over a year ago

user is an object. users is an array. Don't miss the s

JB Nizet Over a year ago

@i-- no: Read the code: it populates the array using var score = this.user.weight * this.user.height; this.users.push(score);. So the elemtns of the array are numbers.

Sajeetharan Over a year ago

@i-- actually score

Chandru · Accepted Answer · 2017-09-20 10:17:16Z

0

Try this :

<h5 *ngFor="let user of users">
{{user | json}}
</h5>

answered Sep 20, 2017 at 10:17

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angular 4 passing data to html

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related