Configure Your First Angular Route

Map a Second Angular Route to a Component

Build Angular Navigation with routerLink

Lazy Load Angular Modules with the Router

Style the Active Angular Navigation Element with routerLinkActive

Use Params from Angular Routes Inside of Components

Understand the Angular Base href Requirement

Build Dynamic Angular Navigation with ngFor

Load Data to Build Angular Navigation

Load Data Based on Angular Route Params

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

Manage UI State with the Angular Router

Angular’s ActivatedRoute allows you to get the details of the current route into your components. Params on the `ActivatedRoute` are provided as streams, so you can easily `map` the param you want off of the stream and display it in your template.

[00:00] We'll add another A tag this time, that links to contact/1, and we'll just call this contact1. To navigate to contact/1 as a route param, let's hop into our contacts routes, and we'll make another path. This one is going to be :ID, so this ID is going to represent that 1 or that route param.

[00:24] Then we'll make another component, this time called just contact component, singular. Let's go over and make that component here. We'll call it contact.component.ts, open that up, create My Component, a template of "I'm the first contact."

[00:42] Export the class, contact component, and make sure to register it with our contact module -- so add our contact component. Then we'll just hop back into our routes, make sure we import the contact component. From here, we should be able to see home, contact, and contact1.

[01:00] This one is loading in, "I'm the first contact," which is in our contact component. To get that one off of the URL -- because you'll see that it is up here in the URL, so /1 -- we'll go into the contact component. In the constructor, you can inject something called the activated route.

[01:23] The route has params on it, and this params is an observable. What we can do to display an observable inside of our template is first we'll delete everything in there and just say contact and the double curlies, and set up an ID and say, "Hey, this is async," meaning this is an observable, and it should be treated as such, so subscribe to it in the template.

[01:48] This ID needs to be exposed on our class, and then we can assign the ID to route params map, and then we just map the params to a params.id. This will just grab the ID off of that. We're going to cast this to any, just to make that red error go away because type script didn't recognize that.

[02:11] Also, anytime you use an operator in RxJS, like Map, you need to import "rxjs/add/operator/map." I'll hit save, and now you should be able to see home, contacts, and contact1. We have contact1, and 1 is this ID, which we're grabbing off the route params and mapping this.

[02:32] There could be many other params, but we're just grabbing the ID off of the params. Lastly, just as before, you'll contact 1 and contacts are both highlighted in the styling, so let's go back into our app component and grab that router link active options, drop that on contacts, because this contacts route is matching this /contact/1.

[02:57] This way, with router link active options exact true, when we navigate to contacts, and then contact1, now this will no longer highlight, because it's not an exact match anymore.

Course

Manage UI State with the Angular Router

Use Params from Angular Routes Inside of Components

Share this video with your friends