Angular Routing

Introduction

Setting up Routing requires three steps

• Configuring the routes
• Activating the routes
• Identifying where to place the route templates

Configuring the routes

We define a path, a component and optionally a guards which provides permissions

    RouterModule.forChild([
      { path: 'products', component: ProductListComponent },
      { path: 'products/:id', component: ProductDetailComponent },
      {
        path: 'products/:id/edit',
        canDeactivate: [ProductEditGuard],
        component: ProductEditComponent
      }
    ])

Activating the routes

This is done via the routeLink for example

        <li class='nav-item'><a class='nav-link' routerLinkActive='active'
              [routerLink]="['/welcome']">Home</a>
        </li>

Identifying where to place the route templates

This is via the router-outlet in the component.

@Component({
  selector: 'pm-root',
  template: `
...
    <div class='container'>
      <router-outlet></router-outlet>
    </div>
    `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pageTitle = 'Acme Product Management';
}