This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Adding Navigation" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas adds icons, and links the toggle bar to the modules.

Get Unlimited Access Now

Transcript from the "Adding Navigation" Lesson

>> Lukas Ruebbelke: All right, so now, we're gonna just step back just a little bit. And we're gonna fall back on our previous lesson of the template stuff we were doing. And if you notice over here, in the sidenav we have this like link thing here. So we'll go ngfor = let link in links.

>> Lukas Ruebbelke: Then, link icon.
>> Lukas Ruebbelke: And link
>> Lukas Ruebbelke: Title.
>> Lukas Ruebbelke: ng4, [LAUGH]. This is AngularJS, there we go, all right. So we have these on the side. Now, let's go ahead and put these up so that instead of having to go through the browser window, that we can actually click on this and navigate to these.

>> Lukas Ruebbelke: So on the link itself, I'll just pull this down. What we can do is on this, so remember property binding. routerlink=link.path. And then what we can also do is routerlinkActive.
>> Lukas Ruebbelke: And it will detect if this particular link is active, so for instance, if you are on customers.

[00:02:09] And then, what it can do is assign an active class. So for instance, you have a navigation, you wanna keep track of where, then you can check that. Also, let me double-check and see where is
>> Lukas Ruebbelke: I think that was a work. Yes, all right. And so, when you click on this, this would be, unfortunately spelling errors.

[00:02:44] And I don't wanna get in the weeds too much on this, but at the same time, I kinda need to fix this.
>> Speaker 2: Because they're being lazy loaded.
>> Lukas Ruebbelke: [LAUGH]
>> Speaker 2: If you don't have, okay.
>> Lukas Ruebbelke: You write that person down and they are getting a t-shirt from me.

[00:03:07] And 50 bucks.
>> Speaker 2: [LAUGH]
>> Lukas Ruebbelke: And an all paid vacation.
>> Lukas Ruebbelke: So lazy loading. It changes things. And if you're lazing loading a module, so this is actually really interesting, is it illustrates how these things come together. Because if you're lazy loading a module, then would it make sense for me to have to import?

[00:03:34] No. The oversight on my part is that because this is coming in eventually, no need to import it. And that where I was throwing this. I already know about this, but now you're lazy loading it. Do I overwrite it, yes or no? So that is a very interesting lesson to be learned.