Create angular routing and make dynamic rendering pages with router-outlet | E-commerce

Lets create a three-component ‘product’, ‘about’, and ‘contact us’ with the below command one by one.

ng g c product

ng g c about

ng g c contactus

Go to the app.routing.modules.ts file and create routing for a particular page with a specific URL 


Code: app.routing.modules.ts

import { NgModule } from ‘@angular/core’;

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

import { ProductsComponent } from ‘./products/products.component’;

import { AboutComponent } from ‘./about/about.component’;

import { ContactusComponent } from ‘./contactus/contactus.component’;

const routes: Routes = [

  { path: ‘products’, component: ProductsComponent },

  { path: ‘about’, component: AboutComponent },

  { path: ‘contact’, component: ContactusComponent },

  { path: ”, component: ProductsComponent },



  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]


export class AppRoutingModule { }

After setting routing to go to app.component.html and set router outlet. The router outlet shows the defined component as per the URL.

Go to app.component.html and paste the below code. 

Code: app.component.html




In which we set header and footer components static to all the pages. But router-outlet will change according to the request url.

Now go to the browser and check the three urls:

  1. localhost:4200/products
  2. localhost:4200/about
  3. localhost:4200/contact