How do I display a property from a simple object using ngrx redux and angular2

Question

I'm using angular2 2.0.0-beta.2 with ngrx store https://github.com/ngrx/store and implemented a simple app using a modified version of the "counter" example on the ngrx/store github page.

In my app, I have a "user" object with two buttons for login and logout. I also have the corresponding reducer functions login and logout where I either return the state with an object that includes a name property or with an empty object...

export const user: Reducer<any> = (state: any = {}, action: Action) => {

    switch (action.type) {
        case LOGIN:
            return {name: 'jdoe'};

        case LOGOUT:
            return {};

        default:
            return state;
    }
};

This doesn't update:

<h2>User Name = {{ user.name | async }}</h2>

...It remains blank when I click the login button, but when piped through the 'json' pipe, I see that indeed the object has changed...

This does update

{{ user | async | json }}

...which outputs { "name": "jdoe" } but obviously that does me no good. Using simply {{ user.name | async }} doesn't work and remains blank.

the template:

<div>
    <h2>User Name = {{ user.name | async }}</h2>
    <button (click)="login()">login</button><button (click)="logout()">logout</button>
</div>
<hr>
<div>
      {{ user | async | json }}
</div>

Here's the plunker: http://plnkr.co/edit/cPubI9upph344qrOqtj8?p=preview

robwormald · Accepted Answer · 2016-02-11 05:06:43Z

12

Syntax looks like (user | async).name - see http://plnkr.co/edit/OVHh9lHvTU4sKrCbrLqq?p=preview

answered Feb 11, 2016 at 5:06

robwormald

8637 silver badges6 bronze badges

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

3 Comments

inki Over a year ago

Awesome, that did the job! I wasn't familiar with that syntax, thanks!

Daskus Over a year ago

How would I go if I would need to access user.name outside the template, for example in a function?

firecape Over a year ago

Wow, this should be displayed prominently in the docs somewhere -- spent a couple of hours figuring out why my properties would not display to the screen. Thank you! Finally solved this via this syntax.

Lejendarm · Accepted Answer · 2017-07-07 09:10:11Z

1

You could also do

    <div *ngIf="user | async as userdata">
     {{userdata.name}}
     {{userdata.birthday}}
     ...
    </div>

answered Jul 7, 2017 at 9:10

Lejendarm

1087 bronze badges

Collectives™ on Stack Overflow

How do I display a property from a simple object using ngrx redux and angular2

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related