In your route: const routes: Routes = [ { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } ]; ⚡ Only loads AdminModule when user navigates to /admin. routerLinkActive directives? Directive Purpose routerLink Binds a component to a route routerLinkAct ive

pplies CSS class when link's route is

ctive

✅ Example:

<a routerLink="/home" routerLinkActive="active-link">Home</a>

ctive-link is applied when the current route is /home.

ngular?

You define route parameters using : in the route path and extract them using

ctivatedRoute.

✅ Defining Route:

{ path: 'product/:id', component: ProductDetailComponent }

✅ Navigating with params:

<a [routerLink]="['/product', product.id]">View Details</a>

ngular routing?

Query params are passed using the URL (e.g., ?sort=price), and managed via the

ctivatedRoute service.

✅ Add query params:

this.router.navigate(['/products'], { queryParams: { sort: 'price' }

});

✅ Read query params:

this.route.queryParams.subscribe(params => {

console.log(params['sort']);

});

in Angular?

ctivatedRoute is a service that gives access to route-related data including:

• Route parameters
• Query parameters
• Route data
• Parent/child route info

✅ Example:

constructor(private route: ActivatedRoute) {}

ngOnInit() {

this.route.params.subscribe(params => {

this.productId = params['id'];

});

}

Name the different types of guards.

🔸 Route Guards:

Used to control access to certain routes or components.

Guard Type Purpose

canActivate Prevents unauthorized access to a route

canActivateCh

ild

Controls access to child routes

canDeactivate Confirms navigation away (e.g., unsaved

changes)

resolve Pre-loads route data before activating the route

canLoad Prevents lazy-loaded module from loading

✅ Example:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard]

}

ngular?

✅ Example Setup:

const routes: Routes = [

{

path: 'dashboard',

component: DashboardComponent,

children: [

{ path: 'analytics', component: AnalyticsComponent },

{ path: 'reports', component: ReportsComponent }

}

];

In Template:

<!-- dashboard.component.html -->

<router-outlet></router-outlet>

Nested components render inside the parent’s <router-outlet>.

would you use it?

canActivate is used to prevent access to a route based on conditions (like

uthentication).

✅ Use case:

Protect /admin route unless user is logged in.

✅ Implementation:

@Injectable({ providedIn: 'root' })

export class AuthGuard implements CanActivate {

constructor(private authService: AuthService, private router:

Router) {}

canActivate(): boolean {

if (!this.authService.isLoggedIn()) {

this.router.navigate(['/login']);

return false;
}
return true;
}
}

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard]

}

✅ Summary Table:

Feature Purpose

RouterModule Enables routing in Angular

routerLink Binds HTML element to a route

routerLinkAct

ive

pplies class when route is active

ctivatedRout

Provides access to route params/query params

Lazy Loading Loads feature modules only when needed

canActivate Route guard to block unauthorized access

Query Params Used for filters, search, sort

(/products?sort=price)

Nested Routes Embeds child routes within parent route

Forms in Angular