import { State } from "./../../state/app.state";
import { EventState, ModelEvent } from "./../models/model.event";

import { createFeatureSelector, createSelector, ActionReducerMap } from "@ngrx/store";

export interface NewState extends State {
    events:EventState
}

const getCalendarFeatureState = createFeatureSelector<EventState>("reducer");

export const getEvents = createSelector(getCalendarFeatureState, state =>  state.events );

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

import * as fromRoot from  "./../../state";
import { CalendarActions, Load } from "./../../state/calendar.actions";
import { ModelEvent, EventState } from "./../../models/model.event";

@Component({
    selector: 'calendar-shell',
    templateUrl: './calendar-shell.component.html',
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class CalendarShellComponent implements OnInit {

    events$:Observable<any>

    constructor(private store:Store<fromRoot.NewState>) { }

    ngOnInit():void{

        this.store.dispatch(new Load());
        this.events$ = this.store.pipe(select(fromRoot.getEvents)); //getting nothing!!

    }

}

<div *ngIf="events$ |  async"> //shows nothing!!
    <ul>
        <li *ngFor="let item of events">{{item.title}}</li>
    </ul>
</div>