All language subtitles for 7. Styling an Active Link

As he mentioned in the last video would be really nice if we could somehow highlight the link that we

are currently visiting.

In this case I'm at slash collections so I would want to highlight or somehow bold the collections link

right here angular has a very easy solution for this back inside of my template file I can find that

two anchor elements we put together and on both them I'm going to add on router link active and then

for the value I'll say active like so put on the second one as well.

This router link active means that whenever this router link right here or this anchor tag is currently

being visited by the user we're going to apply whatever class we list right here as a class name to

that element.

So if I am at slash elements we can imagine that this element is going to have an added class of active

and the fact that this is called active right here is just by chance.

Semantic UI adds in a little a nice underline to a link whenever we add the class of active to it.

This does not have to be active right here.

This can be any class or any C Ss class you want to apply to it so it can be something like highlighted

link or whatever else.

Again it's just that semantic UI uses the class name of active to highlight a link as being well active.

Let's now save this bit back over.

See how we're doing.

Now we can see that as a Mac collections the collections link is bolded and underlined as well.

And as I clicked between elements and collections the highlighted link changes All right so it looks

pretty good though.

Quick pause right here.

Continue in just a moment.