Perform Routing in Your App

As per the feature segregation that we did in the previous lesson, we now know that there are mainly five different views that can be routed to.

1. Home Component/Dashboard Component
2. Profile Component
3. Product Listing Component
4. Product detail component
5. Cart component

And we saw in the routing section we can specify a redirect path and a page not found component too.

So, let’s create these router states now in the refactored app-routing.module.ts.

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product/product-list/product-list.component';
import { ProductCardComponent } from './product/product-card/product-card.component';
import { CartComponent } from './cart/components/cart.component';
import { ErrorPageComponent } from './error-page/error-page.component';


export const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'products', component: 
   ProductListComponent},
  {path: 'checkout', component: 
   CartComponent},
  {path: '', redirectTo: '/home', 
    pathMatch: 'full'},
  {path: '**', component: 
   ErrorPageComponent}
];

Where do we place these?

Placeholder? Router-outlet.

So, let’s specify a placeholder in the app component that can have a header, footer, and body that only contains:

<router-outlet></router-outlet>

Have a look at the application now:

Note: the below code does not give expected results ❌