Angular2 How To Display LocalStorage Value Inside HTML5 Template?

I store 2 keys in localStorage and I'd like to display one of them in my template. I can't access these values. I even created an interface just to store the value of the currentUs

Solution 1:

You can use a getter to get the value from localStorage and show it in your template. Define it like bellow in the component class of your template.

get user(): any {
    return localStorage.getItem('currentUser');
}

In you template:

<b>Status: {{vehicles?.status}} for user: {{user}}</b>

Solution 2:

you have to set item in one component and get item in wherever you want. you can set item in login component and get item in vehicle component.

var user = localstorage.getitem('currentuser');

in component file.

in template: <b>{{user}}</b>

Solution 3:

first think this is a json stringif not a single string .ok

users = localStorage.getItem('currentUser')? JSON.parse(localStorage.getItem('currentUser')):[];

in the ts.component

call by {user.id}