Load Data Based on Angular Route Params
You can load resource based on the url using the a combination of ActivatedRoute and Angular’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.
[00:00] Now it's boring just to see contact four in there. Contact four is Darth Vader, and we ought to see Darth Vader. Let's hop over to our contact component for the individual contact. Instead of just ID here, we can actually say contact, and make this contact. We'll make this contact.
[00:21] This isn't just going to be RouteParams map. We're going to map to the ID. Then we're going to do what's called a switch map, where we take that ID and we pass that along to the HTTP GET. In the constructor I'll need to inject the HTTP service.
[00:40] I'll need to make sure and import this switch map method. Just duplicate that, and this one's switch map. Then we can HTTP GET. I'll grab the URL from contacts component, this whole thing here, back to my contact component, and the string of this plus the ID. That's coming from here.
[01:04] We're getting the ID from the route and then passing it along to the next operator in the chain and taking that ID and switching over to a different stream. This stream is the HTTP GET. Now, as always, we do need to map the response and parse the JSON on it, but after that we're done and we have the entire contact object.
[01:28] I'm going to wrap this contact async in some parens. I'm going to do this syntax, ready, question mark, dot name. I'll show it working first and explain it. I'll click on Darth. It looks like this failed because of a missing /. This needs to be /ID here. I'll hit save and try it one more time.
[01:54] Now it will say contact Darth Vader. You might have noticed how this loaded just a little bit after the page loaded. What's going on here, and what this syntax is doing, if I delete this question mark, and you look at what happens in the console, it says that name is null.
[02:13] That's because we're trying to access this before my HTTP has loaded. One solution is a null guard where you put the question mark in there and say, "Hey, don't load this if this is null." Another one is, that I prefer, there's an operator called start with.
[02:30] I can actually start with an object that has the name of, we'll just say loading, just to show this happening. I'll hit save. Once I click on contacts, and then Darth Vader, there's a brief loading before it turned into Darth Vader.
[02:48] This is never null, it's actually starting with an object with a name of loading, so you don't have to guard against it being null. Even if you just make this blank, it will start with a blank name, and you'll avoid that null check. As soon as this loads, the Darth Vader name will appear.
[03:06] Let's finish this off by wrapping this in an H2 to make it nice and big, and then loading the image of Darth Vader beneath it. The image is also on this contact object, so if I grab this and paste it here, and say dot image, let's also do a start with image of nothing.
[03:30] You'll see that the image is Darth Vader.jpg, but we need this to link to our API here/Darth Vader.jpg. Let's pull this out and bring this up here. Say it's an API. This can be API plus people/ plus ID. After this line, when we have our object back, I want to map again where I have my contact.
[04:02] I'm going to object assign. This is where I can create a new object, pass in my contact, and then override what the image is. I'm going to say the image is API plus contact.image. This way our contact has now become this new object.
[04:23] Object assign takes everything from contact and assigns it to this empty object. Finally we get the contact image, which by default was just contact image, or the Darth Vader underscore jpg. Now we're making it so it's the entire API/Darth Vader jpg.
[04:42] Now when I hit save, you'll see that here is the entire URL to that image. We can now take this entire URL to the image. I'll cut it out of here. I'll evaluate the right side of this, using these square brackets. I'll paste this in. It looks like I didn't copy a paren.
[05:00] Now when I hit save, we'll have Darth Vader and the image underneath it, and I can navigate back and forth between my contacts, Han Solo, Yoda, and I'll get their name and the image from this API.