Router links - lordoftheflies/angular-essential-training GitHub Wiki

Angular has a directive named router link that handles changing behavior of html links, to work with the router engine. You can use router link to create navigation in your apps that use routing. Let's wire up some navigation in the app. In the app dot component dot html file, the first a tag in the nav is the link to view all media items. The router link directive has a selector value of router link so we can add a router link attribute to this element. Then we set this equal to a string value which will be the URL segment we want to route to. To view all items, we can give this a forward slash to indicate that we want to go to the base URL. Remember that we have a deep default route to handle that very scenario. The second a tag is for the list filtered by the medium of movies. For this one, we add the router link attribute and set it equal to forward slash movies. The third a tag is for the medium of series. So we do the same except we put the term series after the forward slash. Using the router link for basic routing is exactly like using a tref, all you need to do here is put the URL segment, either absolute or relative that you want to navigate to and the router link directive will handle brokering that through the router to do the clients I routed. Now if we switch over to the browser we can see our links available and if we click on them to navigate we see the address bar is changing. But the list is not filtering down. That's because we haven't made use of the router perimeter medium yet. I'll cover how to do that in an upcoming video on using route perimeters. But for now let's switch back to the code and get one last router link set up. We need to create an add new media item link. Let's switch over to the media dash item dash list dot component dot html file, and let's add a footer into this layout and put the add link in there so we can create a new footer element at the bottom of the template and create an anchor tag with the router link directive on it and set that equal to slash at. Inside the anchor tag let's use an icon image similar to the main navigation and set the scr value equal to assets slash zero one dot png and give it a class of icon. The project comes with a set of png and zero one dot png is the one we want to use for our add icon. Now that we have our add link in place and wired up with the router link directive we can switch over to the browser and we can click the add link and see the form replace the list items and we can click on the list link and see the list get swapped in.