1. Import Module
import { RouterModule } from '@angular/router'; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ] })
2. Define Routes
const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'hero/:id', component: HeroDetailComponent }, ];
1. Import router to component
public goToSecretPage() { this.router.navigate(['/secret']); }
import { Router } from '@angular/router'; @Component({ ... }) export class MyComponent { constructor(private router: Router) {} }
2. Navigation
( inside Component )
1. routerLink directive
<nav> <a routerLink="/home" routerLinkActive="active">Home</a> <a routerLink="/secret" routerLinkActive="active">Secret</a> </nav>
( inside Template )
2. router-outlet directive
<main> <router-outlet></router-outlet> </main>
(don't forget)
<base href="/">
By Anton Bely
Hello world! My name is Anton Bely and I'm a Product Frontend Engineer. Welcome!
