The Angular Router enables navigation from one view to the next as users perform application tasks.
Router outlet : you've placed in the host view's HTML
Router links :
<base href> : Most routing applications should add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.
<base href="/">
Router imports:
import { RouterModule, Routes } from '@angular/router';
Configuration:
configures the router via the RouterModule.forRoot() method.
Router outlet:
The RouterOutlet is a directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.
Router links:
The RouterLink directives on the anchor tags give the router control over those elements.
RouterLinkActive:
The RouterLinkActive directive toggles css classes for active RouterLink bindings based on the current RouterState.
<a routerLink="/list" routerLinkActive="active">Crisis Center</a>
Router Service:
Router state:
You can access the current RouterState from anywhere in the application using the Router service and the routerState property.
Activated route:
The route path and parameters are available through an injected router service called the ActivatedRoute.
Router events:
During each navigation, the Router emits navigation events through the Router.events property.
Example
--src/app/app-routing.module.ts--
--src/app/app.module.ts--
REFERENCE : https://angular.io/guide/router
