Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Params from Angular Routes Inside of Components

    John LindquistJohn Lindquist

    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.

    angularAngular
    2 - 4
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss