Add <router-outlet></router-outlet> in the template. ✅ Example: // app-routing.module.ts const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} The RouterModule is a built-in Angular module that provides routing directives, services,

Short answer: And configuration to manage navigation between views.

Explain a bit more

✅ Imports in App: import { RouterModule } from '@angular/router'; You use it with RouterModule.forRoot() (for root module) or RouterModule.forChild() (for feature modules with lazy loading). const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent }, { path: '**', component: NotFoundComponent } // wildcard route ]; Tools for Managing Routes: Route Guards Route Parameters Lazy Loading Query Params Nested Routes implemented? 🔸 Lazy Loading: Lazy loading is a technique to load feature modules only when needed, improving initial load performance. ✅ Implementation:

Real-world example (ShopNest)

ShopNest’s ProductListComponent binds *ngFor to products and uses (click) to add to cart.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.