Load Data to Build Angular Navigation
Using the Http service, you can load in data to create your routerLink navgation. This builds on the same concepts of using *ngFor, but since Http uses streams, you’ll need to use the | async pipe to be able to properly display the loaded data.
[00:00] I have some "Star Wars" data at this URL. It's just an array of all the people in Star Wars. If you want to set this up yourself to follow along, just go to JohnLindquist/swap adjacent server, NPM Install and NPM Start, and you'll have your own local copy running.
[00:15] In my Contacts component, I want to load in this data. I'll say Constructor, and I need to inject the http service. To be able to use this, I'm going to have to add the http module to my Contacts module. We'll import the http module. Then, back in the component, I can load all the people by http.get, and paste in that string from my API.
[00:41] I need to map the response and parse it as JSON. Always remember, if you use a RxJS operator, you need to import it, RxJS/add/operator/map. Then I'm going to assign this to Contacts, and since this will be an observable, I'm going to add a $ to the end. It's a naming convention for that. I'll say Contacts is all of this stuff.
[01:09] That's going to be an array of people, which I can then display in this template. I'll say div ngFor let contact of Contacts async. Render out the contact.name. Just made a typo. I forgot to invoke JSON. JSON's a method to take the response, get the body, and return the JSON object off of that.
[01:34] I'll hit save, and now we should see, in the Contact, an array of divs, or the divs that are parsed out and loaded, a collection of divs that each have the contacts that we loaded in and displaying the contact name.
[01:51] Let's take these divs and nest an a tag inside of it. We can set up, just like we've done before, these links to click on, and set up the router link. The router link here is just going to be the contact ID. This is going to be relative to the current URL, so we're in Contacts, and this will just append the ID to it.
[02:17] When I click on Luke, it's going to append 1 onto that. When I click on C3PO, it's going to append a 2 onto that. If I wanted to hard code this, it'd look a little bit different. It wouldn't be contact/contactID, because that wouldn't evaluate anything. It's like contacts divided by contactID.
[02:36] What you do is you make an array, and then you use strings for the parts that you know what the strings and names are, and then comma-separate the values you want to evaluate. This would evaluate to contacts/contact.id, but because we're inside of the Contacts path already, this would actually try and take us to contacts/contacts, and then contactID.
[02:59] We could solve that, if you need to work with absolute URLs, just by putting "/" in the front. This will work the same and behave as you'd expect. I'll go to Contacts, click on Darth. It will take us to Contact4, go back to Contacts.
[03:13] What makes sense most of the time is keep track of where you are inside your app. We are currently inside of the Contacts module, which is mapped to that Contacts path, so a contact ID is all we need to make sure to go to the proper /ID.