Async pipe on object

app.component.ts

import {Component} from "angular2/core";
import {Store, Reducer} from "@ngrx/store";
import {Observable} from "rxjs/Observable";

interface AppState {
    counter: number;
}

interface ICounter {
    id: number,
    value: number
}

const INCREMENT = 'INCREMENT';

const counter: Reducer<ICounter> = (state: ICounter = { id: 1, value: 0 },
    { type, payload }) => {

    switch (type) {
        case INCREMENT:
            return { id: payload.id, value: payload.value++ };
        default:
            return state;
    }
};


@Component({
    selector: 'my-app',
    template: `
<span>Counter: {{ counter.value | async }}</span>
<button (click)="increment()">Increment</button>
`
})
export class AppComponent {
    counter: Observable<ICounter>;

    constructor(public store: Store<AppState>) {
        this.counter = store.select('counter');
    }

    increment() {
        const payload: ICounter = { id: 1, value: 0 };
        this.store.dispatch({ type: INCREMENT, payload });
    }
}