Learn about Angular
Routing
<ul>
<li>high light buttons</li>
<li>default page</li>
<li>error page</li>
</ul>
<pre><code>src/app/app.component.html
&lt;router-outlet&gt;&lt;/router-outlet&gt;

&lt;nav&gt;
 &lt;a class="button" routerLink="/crisis-list" routerLinkActive="activebutton"&gt;Crisis Center&lt;/a&gt; |
 &lt;a class="button" routerLink="/heroes-list" routerLinkActive="activebutton"&gt;Heroes&lt;/a&gt;
&lt;/nav&gt;

src/app/app.module.ts
imports: [
 BrowserModule,
 RouterModule.forRoot([
 {path: 'crisis-list', component: CrisisListComponent},
 {path: 'heroes-list', component: HeroesListComponent},
 {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
 {path: '**', component: PageNotFoundComponent}
 ]),
],
</code></pre>

Learn about Angular

Routing

- high light buttons
- default page
- error page

```
src/app/app.component.html
<router-outlet></router-outlet>

<nav>
 <a class="button" routerLink="/crisis-list" routerLinkActive="activebutton">Crisis Center</a> |
 <a class="button" routerLink="/heroes-list" routerLinkActive="activebutton">Heroes</a>
</nav>

src/app/app.module.ts
imports: [
 BrowserModule,
 RouterModule.forRoot([
 {path: 'crisis-list', component: CrisisListComponent},
 {path: 'heroes-list', component: HeroesListComponent},
 {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
 {path: '**', component: PageNotFoundComponent}
 ]),
],
```

#100DAYSOFCODE Day62