Configure Your First Angular Route

Map a Second Angular Route to a Component

Build Angular Navigation with routerLink

Lazy Load Angular Modules with the Router

Style the Active Angular Navigation Element with routerLinkActive

Use Params from Angular Routes Inside of Components

Understand the Angular Base href Requirement

Build Dynamic Angular Navigation with ngFor

Load Data to Build Angular Navigation

Load Data Based on Angular Route Params

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

Manage UI State with the Angular Router

Angular navigation is configured using the `routerLink` directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular’s router to navigate between your defined routes.

[00:00] To create some navigation, I am going into my app component, where the router outlet is in my template. I'll just say SomeNav. I'll create a tag, and instead of href, I am going to use a directive called RouterLink. This RouterLink is going to be empty because that one's going to point to home, when I click on this.

[00:18] The second one, not href but RouterLink, is going to point to contacts, so this one will load contacts. Just format this a little bit and hit save. You'll see how the navigation of home, contacts, home, contacts change in the URL, and load in those individual modules.

Course

Manage UI State with the Angular Router

Build Angular Navigation with routerLink

Share this video with your friends