Angular 2, How to store value in variable from ngOnInit()?

Question

Here when I login to my app, i want to get json object stored in local Storage and then assign it to user Object. First time if I login it won't show anything but if I refresh the page I can see first name.

Here is .ts file

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    user: Object;
    ngOnInit() {
    this.user = JSON.parse(localStorage.getItem('user'));
    }
}

And in template I want to use it like this:

<p> {{ user.first_name }} </p>

How can i solve this?

What is inside the user object? you can view it in the html by using {{user | json}} or just console.log it. — Carsten
– Carsten, Commented Aug 23, 2017 at 11:27
Seems like you snippet is incomplete. How are you injecting localStorage? Post some more relevant code — DAG
– DAG, Commented Aug 23, 2017 at 11:28
@dag sessionStorage and localStorage is globally available... — Carsten
– Carsten, Commented Aug 23, 2017 at 11:28

Martin · Accepted Answer · 2017-08-23 12:00:02Z

7

Your html is rendering before the variable is being set

Inside your html use this:

<p> {{ user?.first_name }} </p>

This is called the Safe Navigation Operator which will prevent the error and render the first_name when it is populated.

edited Aug 23, 2017 at 12:00

Martin

16.4k4 gold badges51 silver badges58 bronze badges

answered Aug 23, 2017 at 11:55

Wesley Coetzee

4,8483 gold badges30 silver badges48 bronze badges

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

2 Comments

parth Over a year ago

Thanks. But my question is how i can set variable with value before html render, since i want to use it's value in my template.

rmc00 Over a year ago

Since this is a binding, it will update in your template when the user variable changes in your typescript. So initially, user might be null and nothing will show in the <p>, but it will update after you set user. This seems like the right answer.

parth · Accepted Answer · 2017-09-01 09:49:08Z

3

After proper searching, found my answer here.

Angular2: How to load data before rendering the component?

@Wesley Coetzee, thanks for your support.

answered Sep 1, 2017 at 9:49

parth

6741 gold badge11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular 2, How to store value in variable from ngOnInit()?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related