How does router-outlet work in Angular?

In Angular, <router-outlet></router-outlet> is a directive used for routing and navigation. It plays a crucial role in rendering the component associated with a specific route within your application.

Here’s how <router-outlet></router-outlet> works:

1. Setting Up Routes:
   First, you need to define the routes for your Angular application. This is usually done in the app-routing.module.ts file. In this file, you import the RouterModule and configure an array of route objects. Each route object specifies a path and the corresponding component that should be displayed when the path is matched.

   const routes: Routes = [
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent },
     // ...
   ];

2. Configuring the Router:
   In the same app-routing.module.ts file, you configure the RouterModule using the RouterModule.forRoot(routes) method. This sets up the Angular router to handle navigation based on the defined routes.

   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })

3. Placing <router-outlet></router-outlet> in Templates:
   Within the HTML template of your main application component (often called app.component.html), you place <router-outlet></router-outlet>. This is where Angular will dynamically render the component associated with the currently matched route.

   <router-outlet></router-outlet>

4. Navigation:
   To navigate between different views (components) defined by your routes, you typically use Angular’s Router service. For example, you can navigate to the “home” route using router.navigate(['/home']).

   import { Router } from '@angular/router';

   // ...

   constructor(private router: Router) { }

   goToHome() {
     this.router.navigate(['/home']);
   }

5. Rendering Components:
   When you navigate to a specific route, Angular’s router will match the path to one of the routes you defined earlier. It will then create an instance of the associated component and render it inside the <router-outlet></router-outlet> in your template. This effectively replaces the content of <router-outlet></router-outlet> with the component’s view.
6. Route Parameters:
   Routes can also include parameters, allowing you to pass data to components. For example, a route like /user/:id can capture the id parameter from the URL, making it available to the associated component.

   { path: 'user/:id', component: UserProfileComponent }

In the UserProfileComponent, you can access the id parameter using the ActivatedRoute service.

   import { ActivatedRoute } from '@angular/router';

   // ...

   constructor(private route: ActivatedRoute) {
     this.route.params.subscribe(params => {
       const userId = params['id'];
       // Do something with userId
     });
   }

In summary, <router-outlet></router-outlet> is a placeholder in your Angular application’s template where the router dynamically renders the component associated with the currently matched route. It allows you to create single-page applications with multiple views or pages, enabling navigation between them while maintaining a seamless user experience.