Waiting for ngrx action before loading page with URL parameter

Question

I\'m building an ng2 application using ngrx. When the app is launched a web service is called to get initial data, once this data is fetched I create an INIT_DONE a

Answer 1

You need a resolver. A resolver waits until data is available before completing the navigation action.

@Injectable()
export class DocumentsResolver implements Resolve {

    constructor(
        private store: Store
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
        // take id from snapshot
        const id = route.params['id'];
        // start with the document list
        return this.store.select('documents')
          // wait until there is data available
          .filter(documents => documents && documents.length > 0)
          // then produce the selected document
          .mergeMapTo(this.store.select('selectedDocument'));
    }
}

On route configuration:

export const DocumentsRoutes: RouterConfig = [
    { path: 'documents/:id', component: DocumentsDetailComponent, resolve: { document: DocumentsResolver } }
];

More about router resolve here