Trying to make a DataSource for angular2 material table using ngrx store. https://material.angular.io/components/table/examples In the sort example they access the _exampleDatabase data directly when either the sort or data changes. Using ngrx the data cannot be accessed directly so I am trying to use rxjs operators to sort the data.
export class ExampleDataSource extends DataSource<any> {
constructor(private _sort: MdSort, private _storeData$: Observable<UserData[]>) {}
connect(): Observable<UserData[]> {
return Observable.combineLatest(this._storeData$, this._sort.mdSortChanage,
(data, sort) => {
// sorting logic here
return data;
})
}
This works fine once I change the sort order or dispatch a new event to change the user data in the store. I need to get the initial data from each to display. Is there an rxjs operator I am missing to make this happen? Or is there another better approach for this scenario.
I have tried using withLatestFrom and startWith but both were unsuccessful.
Thanks!
Edit: Added a plunkr that shows the issue http://plnkr.co/edit/5HOJSKKmdCuns2kvSirS?p=preview on main.ts. When removing the eventEmitter from the combineLatest call then the expected message prints. Since mdSort doesn't emit an event until clicked this is probably causing my issue.
Edit2: See Sergey comment below for solution. Working plunkr is also in comments since my reputation isn't high enough to post 2 links. Since the event emitter did not output at least one value, I needed to add startWith on the event emitter and it worked.