Angular Interview Questions

Angular's router is a powerful module that enables navigation between different views or components in a Single Page Application (SPA). It allows developers to define routes that map to different components, facilitating dynamic navigation without requiring a full page reload. This enhances the user experience by providing fast, responsive, and fluid interactions within the application.

Purpose of Routing:

1. Navigation:

   • The primary purpose of routing is to enable navigation between different parts of an application. This is essential for creating a cohesive and interactive user experience in SPAs.

2. URL Management:

   • Routing allows for managing URLs in a way that reflects the application's structure. Each route corresponds to a specific URL, making it possible to bookmark, share, and navigate to specific parts of the application directly.

3. Dynamic Content Loading:

   • Routing facilitates loading different components or views dynamically based on the URL. This means the application can display different content without reloading the entire page.

4. State Management:

   • By mapping URLs to different states of the application, routing helps in managing the application's state and ensuring consistency across different views.

Key Concepts of Angular’s Router:

1. Routes:

   • Routes are definitions that map URLs to components. They are configured in the application's routing module.
   • Example:

     const routes: Routes = [
       { path: '', component: HomeComponent },
       { path: 'about', component: AboutComponent },
       { path: 'contact', component: ContactComponent }
     ];

2. RouterModule:

   • The RouterModule is a module that provides the necessary services and directives for routing in Angular. It needs to be imported and configured in the root module or feature modules.
   • Example:

     import { NgModule } from '@angular/core';
     import { RouterModule, Routes } from '@angular/router';
     import { HomeComponent } from './home/home.component';
     import { AboutComponent } from './about/about.component';
     
     const routes: Routes = [
       { path: '', component: HomeComponent },
       { path: 'about', component: AboutComponent }
     ];
     
     @NgModule({
       imports: [RouterModule.forRoot(routes)],
       exports: [RouterModule]
     })
     export class AppRoutingModule { }

3. RouterOutlet:

   • The RouterOutlet directive acts as a placeholder in the template where the matched component will be displayed.
   • Example:

     <nav>
       <a routerLink="/">Home</a>
       <a routerLink="/about">About</a>
     </nav>
     <router-outlet></router-outlet>

4. RouterLink:

   • The RouterLink directive is used to create navigational links. It binds the link to a specific route.
   • Example:

     <a routerLink="/contact">Contact</a>

5. Route Parameters:

   • Routes can include parameters to capture values from the URL. These parameters can then be accessed in the component.
   • Example:

     const routes: Routes = [
       { path: 'user/:id', component: UserComponent }
     ];

   • Accessing the parameter in the component:

     import { ActivatedRoute } from '@angular/router';
     
     @Component({
       selector: 'app-user',
       templateUrl: './user.component.html'
     })
     export class UserComponent implements OnInit {
       userId: string;
     
       constructor(private route: ActivatedRoute) {}
     
       ngOnInit() {
         this.userId = this.route.snapshot.paramMap.get('id');
       }
     }

6. Guards:

   • Guards are used to control access to routes. They can check conditions before navigating to a route (e.g., authentication).
   • Example:

     import { Injectable } from '@angular/core';
     import { CanActivate, Router } from '@angular/router';
     
     @Injectable({
       providedIn: 'root'
     })
     export class AuthGuard implements CanActivate {
       constructor(private router: Router) {}
     
       canActivate(): boolean {
         // Logic to determine if route can be activated
         if (/* user is authenticated */) {
           return true;
         } else {
           this.router.navigate(['/login']);
           return false;
         }
       }
     }

Implementing Routing in Angular:

1. Setting Up Routes:

   • Define the routes and their associated components in a routing module.
   • Example:

     const routes: Routes = [
       { path: '', component: HomeComponent },
       { path: 'about', component: AboutComponent },
       { path: 'contact', component: ContactComponent }
     ];

2. Configuring RouterModule:

   • Import RouterModule and configure it with the routes using RouterModule.forRoot(routes) for the root module or RouterModule.forChild(routes) for feature modules.
   • Example:

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

3. Using RouterOutlet:

   • Place the <router-outlet> directive in the template where the routed components should be displayed.
   • Example:

     <router-outlet></router-outlet>

4. Navigating with RouterLink:

   • Use the routerLink directive to create links for navigation.
   • Example:

     <a routerLink="/about">About</a>

In Summary:

Angular's router is an essential module for building Single Page Applications (SPAs). It provides a way to navigate between different views or components, manage URLs, and dynamically load content without reloading the entire page. Key features include defining routes, using RouterModule, RouterOutlet, RouterLink, handling route parameters, and implementing guards for route protection. These capabilities enable developers to create seamless, responsive, and user-friendly navigation experiences within Angular applications.