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

Mapping Angular routes to components is fairly straight-forward, but if you’re not going to lazy load in modules, then you’ll need to make sure to reference each `Component` you’re using in your main App Module.

https://app.egghead.io/api/v1/lessons/angular-2-map-a-second-angular-route-to-a-component/subtitles

[00:00] I'll create a second component in a folder called contacts. I'll say contacts.component.ts. This will just be a component with a template, this is a ContactsComponent. We'll export the class, ContactsComponent.

[00:17] Inside our app routes, just create another path. I'll duplicate this one. We'll say the path here is Contacts. When we hit Contacts, we want to load the ContactsComponent. We also need to declare in my AppModule the ContactsComponent.

[00:33] Now, I'm going to hit Save. I'll let this refresh and then I'll go to /contacts. Hit Enter. You see this is the ContactsComponent. If I go back to the route, you'll see that this is the HomeComponent.

Map a Second Angular Route to a Component

Share this video with your friends

Course

Manage UI State with the Angular Router