Let's make our navigation a little better by adding the destinations to the navigation. First, let's create a navigation component and add our links to it. Component names should be multi-worded to not conflict with any existing or future HTML elements, which are all single-worded. For single-instance components, it's strongly recommended, according to the official style guide, to name these components using the, for example, the navigation.
And let's add a few styles to make it look a little nicer. We are making our styles scoped, which means that these styles will only affect this component. view. Now let's import the navigation component and add it to our template.
view, it will be available in all our pages, which makes sense for a navigation component. And delete the div that holds our router links, as we want to use our new navigation component instead. Let's check to see if it is all working. As you can see, Clicking on the destinations brings us to a new page for each destination.
Perfect! Did you notice that the color of the active navigation is a different color? How is that working? Let's take a look.
Let's inspect the code to see what is happening. Can you see by clicking on the root, the class RouterLinkExactActive is added to the right destination? This class gets added automatically to the active link by the RouterLink component. Pretty cool, right?
and all we have to do is add the style we want to that class and we have active classes working. view, scroll down to the styles and you will see a class for RouterLinkExactActive. Let's change it to red to test it out. If you don't like the default class name, you can of course create your own.
js, add the name of the class you would like to use to the LinkExactActive class property. Let's call it ViewSchoolActiveLink. or feel free to come up with something cooler. Let's see if it works.
We can add the class ViewSchoolActiveClass to our styles and give it a nice purple colour. And you can see that now our active link is purple. And if you check in DevTools, you will see our new ViewSchoolActiveClass has been applied. Now really these styles should be in the navigation component and not in apt-up view.
So let's copy them over. That looks better. Our app really is starting to take shape. Let's make our navigation a little better by adding the destinations to the navigation.
First, let's create a navigation component and add our links to it. Component names should be multi-worded to not conflict with any existing or future HTML elements, which are all single-worded. For single-instance components, it's strongly recommended, according to the official style guide, to name these components using the, for example, the navigation. And let's add a few styles to make it look a little nicer.
We are making our styles scoped, which means that these styles will only affect this component. view. Now let's import the navigation component and add it to our template. view, it will be available in all our pages, which makes sense for a navigation component.
And delete the div that holds our router links, as we want to use our new navigation component instead. Let's check to see if it is all working. As you can see, Clicking on the destinations brings us to a new page for each destination. Perfect!
Did you notice that the color of the active navigation is a different color? How is that working? Let's take a look. Let's inspect the code to see what is happening.
Can you see by clicking on the root, the class RouterLinkExactActive is added to the right destination? This class gets added automatically to the active link by the RouterLink component. Pretty cool, right? and all we have to do is add the style we want to that class and we have active classes working.
view, scroll down to the styles and you will see a class for RouterLinkExactActive. Let's change it to red to test it out. If you don't like the default class name, you can of course create your own. js, add the name of the class you would like to use to the LinkExactActive class property.
Let's call it ViewSchoolActiveLink. or feel free to come up with something cooler. Let's see if it works. We can add the class ViewSchoolActiveClass to our styles and give it a nice purple colour.
And you can see that now our active link is purple. And if you check in DevTools, you will see our new ViewSchoolActiveClass has been applied. Now really these styles should be in the navigation component and not in apt-up view. So let's copy them over.
That looks better. Our app really is starting to take shape.