How to bind object of data in html page in angular2

Question

In userdata I have got firstname , lastname.... So I want to bind firstname in homecomponent.html, so how can I bind it in html template ?

export class HomeComponent {

    constructor(private authenticationService : AuthenticationService) {
        userdata=this.authenticationService.user_data;
    }
}

What you are getting as userdata have you tried to console it? If yes then what is it? — The Hungry Dictator
– The Hungry Dictator, Commented Jun 20, 2017 at 6:08

Sajeetharan · Accepted Answer · 2017-06-20 06:04:11Z

1

Just,

<div><h1>{{userdata.firstname}}</h1></div>

EDIT:

if your data comes from an asynchrnous call, then use elvis operator to check the value exists,

<div><h1>{{userdata?.firstname}}</h1></div>

edited Jun 20, 2017 at 6:04

answered Jun 20, 2017 at 5:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

10 Comments

Krunal Over a year ago

show error: home.component.html:19 ERROR TypeError: Cannot read property 'firstname' of undefined at Object.eval [as updateRenderer] (home.component.html:22)

Sajeetharan Over a year ago

try using elvis operator like this <div><h1>{{userdata?.firstname}}</h1></div>

Krunal Over a year ago

can you please explain me about it brief

Krunal Over a year ago

yaah sure but its show wait for 5 minute I will mark after 5 minute

Sajeetharan Over a year ago

what do you want me to explain?

|

MichaelSolati · Accepted Answer · 2017-06-20 06:00:27Z

0

If you're discussing interpolation you can show any field of the userdata object you can do this in your html:

<p>{{userdata.firstname}} {{userdata.lastname}}</p>

answered Jun 20, 2017 at 6:00

MichaelSolati

2,8721 gold badge19 silver badges30 bronze badges

2 Comments

Krunal Over a year ago

show error: home.component.html:19 ERROR TypeError: Cannot read property 'firstname' of undefined at Object.eval [as updateRenderer] (home.component.html:22)

MichaelSolati Over a year ago

It depends on what are the fields of your user data. Try console logging userdata after you assign the value to see what the field names are.

Collectives™ on Stack Overflow

How to bind object of data in html page in angular2

2 Answers 2

10 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related