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