Angular2 - how to get a variable from typescript to my html dom

Question

I've used AngularJS a lot in the past, but Angular2 is a whole new world for me.. and I've not quite gotten it down.

I have a home.ts and a home.html

Inside my home.ts I have this:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  userData:any;

  constructor(
    public navCtrl: NavController,
    private storage: Storage,
    private database: AngularFireDatabase) {
      this.storage.get('user').then((result) => {
        this.userData = result;
      });

  }

I have a localstorage variable for the user, and I'm assigning it to userData..

Inside my .html file, I have a span that I'd like to populate with info from the userData variable... I thought it would be as easy as doing this:

<span id="userName">{{userData.firstName}}</span>

but I just get a ton of errors Cannot read property 'firstName' of undefined...

How can I get the userData variable into my html? Thanks!

Are you sure , you userData is not undefined ? means userData geeting the data from localstorage ? — Aravind S
– Aravind S, Commented Feb 22, 2018 at 3:54
I would recommend shifting storage.get to the ngOnInt lifecycle hook. Why? This will allow for re-fetching of your localStorage data everytime this component gets displayed to screen instead of only once at the beginning of the application spin up time. — Zze
– Zze, Commented Feb 22, 2018 at 3:59

Pavan Bahuguni · Accepted Answer · 2018-02-22 03:53:15Z

4

You have to wait till the this.storage.get('user') is resolved, before your then is executed userData is undefined and you are trying to do userData.firstName which is giving the error Cannot read property 'firstName' of undefined..

You can do

<span *ngIf="userData" id="userName">{{userData.firstName}}</span>

So you wait for your promise to resolve sand then show that value on the screen.

answered Feb 22, 2018 at 3:53

Pavan Bahuguni

2,0251 gold badge19 silver badges21 bronze badges

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

Comments

Alex · Accepted Answer · 2018-02-22 04:01:11Z

1

What I typically do in this scenario is use the elvis operator in my binding. What that would look like for you is:

<span id="userName">{{userData?.firstName}}</span>

The problem is Angular is trying to render the value but since this step is occuring while your async request is still resolving, it tries to access the first name property on an undefined property - hence it throws the exception you are seeing.

Something else you could do (less preferred imo) is to set an initial value to userData. For example:

userData: any = {};

answered Feb 22, 2018 at 4:01

Alex

3451 silver badge7 bronze badges

2 Comments

Simon Over a year ago

Thanks, this worked as well, I gave the answer to the other question but this might be cleaner.. Thank you!

Alex Over a year ago

No problem at all! I prefer the ?. syntax as it's more familiar / translatable to developers acccustomed to C#. On a display form with multiple properties, it's also significantly easier to implement this syntax rather than using the *ngIf directive on 10+ elements (it also doesn't require a wrapping element such as a span)

Collectives™ on Stack Overflow

Angular2 - how to get a variable from typescript to my html dom

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related