`#ngrx/store` - createFeatureSelector never called from wrapper component - angular7

Question

Here is my createFeatureSelector ts file :
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 );
my events shell component ( where i call the getEvents ):
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!!
}
}
template :
<div *ngIf="events$ | async"> //shows nothing!!
<ul>
<li *ngFor="let item of events">{{item.title}}</li>
</ul>
</div>
Any help? thanks in advance. ( ready to provide further details if any )

Answer 1

I update the dom element like this:
<div *ngIf="events$ | async"> //shows nothing!!
<ul>
<li *ngFor="let item of events | async">{{item.title}}</li>
</ul>
</div>
works fine.