The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Load Data Based on Angular 2 Route Params

Load Data Based on Angular 2 Route Params

5:16
You can load resource based on the url using the a combination of `ActivatedRoute` and Angular 2’s `Http` service. Since the params and `Http` are both streams, you can use RxJS to get the data off the param then `switchMap` over to an `Http` request using that data.
Watch this lesson now
Avatar
egghead.io

You can load resource based on the url using the a combination of ActivatedRoute and Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

Avatar
Julia

The observable contact$ is used in two times with async pipe (two subscription) and therefore two remote calls are executed.

Avatar
John

Yeah, I should expound on that with a follow-up.

In reply to Julia
Avatar
Christopher Kwiatkowski

I would like to know what are the best practices with regard to resolving data when using the Angular2 Router.

I typically work in systems where security is paramount to performance and I would typically block the route change if the authenticated user was not authorized to access a specific record e.g. a Contact.

So, I would lean toward creating a DetailResolveService that implements Resolve (imported from @angular/router) and then configure that DetailResolveService in the mymodule.routes.ts file to be resolved prior to the route change to display the Detail of a single record e.g. a single Contact record.

Your tutorial shows illustrates the use of pulling the Contact's ID off of the route params in the constructor and then beginning the resolve process for the Contact data based on that ID.

I have also seen plenty of examples of developers resolving data within the ngOnInit() method by implementing the ngOnInit "interface?" / lifecycle hook.

What is your best practice recommendation for those of us looking for the best way to resolve data in a DRY manner.

Should we encapsulate the resolving of an Observable HTTP call in the constructor prior to ngOnInit()?
Should we encapsulate the resolving of an Observable HTTP call in an ngOnInit()?
Should we encapsulate the resolving of an Observable HTTP call in a ResolveService that is configured to be called by the angular router prior to a route change and then assign the resolved data off of the this.activatedRoute.data?

Avatar
Michal

Why "loading..." phrase is that long time when app is so small ? Is not a problem when you are working with much more bigger application ?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?