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>