Passing a value in the URL through to your component.
- [Instructor] Let's try to display all of the messages from a specific user. What we will do is pass the username as a URL parameter, and then filter the messages by that owner. The first thing we will need to do is make our message linkable so that when I click on one of these cards, it will load all the messages by that specific user. Let's go to our message component, and let's add a router link to the owner name inside the title.
And for now, we'll just supply slash messages as the value. Let's give that a try. Since we're already in that messages view, let's go back to our default view. And now let's click on one of the names. As you can see, it takes us to the correct route. But notice that when we hover over a name, we aren't getting the expected icon. So let's add some quick styling in order to fix that. So I'll add an inline style to our card title on line nine.
With a cursor property and pointer as the value. Let's give that a try. Now we can see we're getting the expected icon. Next, let's focus on setting the name as the URL parameter. We will do that by passing in a list to the router link, with the second item or parameter as the name. So since we're passing a list, let's wrap our route in brackets. And it's still a string, so let's add quotes around it.
And as a second parameter, we'll pass in the message owner. Let's give that a try. Notice that we're getting an error, specifying that no routes can be matched. That's because we have to modify our route to let it know we expect to pass a parameter. So let's open up our app module, and we'll do that to our message route by adding a slash, colon, name.
Since we are still getting the error, there must be something else wrong. Now if we look at our URL segment in the error, we can see there's some strange formatting. And it's not giving us the value of message dot owner. It's just simply placing it as a string literal. So in order to get access to the value of message dot owner, we will need to make our router link binding. And to do that, inside our message component, we'll just wrap router link with brackets.
Let's give that a try. And as you can see, the name is passed in properly as a URL parameter in front of messages. One consequence of adding the name parameter to our messages routes is that we can no longer navigate to a message route without passing in a name. So if we just try to go to messages, we'll get an error saying route does not exist. So let's go ahead and add that route. So I'll just copy the last route we added, which is the messages slash colon name, and paste it right above.
And now I'll simply just remove the name portion and leave messages. The way, we have a messages-based route. And we can now navigate to our messages without having to pass in a name. But we can also go to our messages slash name route. Next, let's focus on filtering our messages so that we can see the messages owned by that user.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.