Linking a component to a route which will allow us to change the view in the router-outlet.
- [Narrator] We will make our messages component as its own route so that we can easily demonstrate routes with an existing component. Also, eventually you might want to be able to search for specific messages, such as messages from one specific user. And by having messages as its own route, you can pass the username in the URL to search for those messages. So lets begin by adding a new route, and we can just copy and paste our existing route.
And we'll want to access this route by going to the /messages URL, so I'll put in messages for this path, and then I'll just specify the messages component since that's the component we want to load when we go to this path. Let's test this out. Let's navigate to our messages component by typing /messages in the URL. And now we can see that our messages component did load correctly. Now let's add some buttons in the navbar, so we can navigate to our messages view without causing a page reload.
So let's open up our nav component. We will add a button with the empty button material style. And we'll set the router link to /messages. So below our title, let's add that button. And I'll title it messages. And we'll use the router link directive in order to have our route load when we click on that button. And before we try it, it seems like on line eight, I forgot to add a slash at the end of our button tag.
Let's give that a try. And now we have our messages button. Let's reload with our default view, so that we can then navigate to our messages. And as you can see, it did navigate to the messages view without reloading the entire app. Even if we hit the back button, that'll take us back to our home view without reloading the app. Let's make the title in our navbar a button as well, so that we can navigate home by clicking it. So I'll copy the button on line eight, and paste it above.
Then I'll take the text message board, cut that out, and replace the messages text with that. Then I'll simply provide a slash as the value for our router link to show that we'd like to go to the root of our application, or the default view. Let's save that and give it a try. As we can see, we are able to navigate between several views, without having to do a page reload. Since we mentioned it before that we might like to search for messages from a specific user, let's take a look at that next.
- 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.