Angular cheatsheet - Basic routing

angular-cheat-basic-routing.md

Angular Basic Routing

The following is an example on how to setup basic routing

import RouterModule and Routes

app.module.ts:

import { RouterModule, Routes } from '@angular/router';

define your routes

app.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

import the Module

app.module.ts:

@NgModule: ({
  ...
  imports: [
    ...
    RouterModule.forRoot(routes)
    ]
  ...
})

use router-outlet to place content

<router-outlet> component places the contents of the route [routerLink] allows to navigate to path without reloading the page.

app.component.html:

<div class="navbar">
  <a [routerLink]=['/home']> [HOME] </a>
  <a [routerLink]=['/about']> [ABOUT] </a>
</div>

<!-- router content goes here -->
<router-outlet></router-outlet>