What is routerLink and routerLinkActive in Angular
💡 Concept Name
routerLink & routerLinkActive – Angular directives used for navigation and styling active links in single-page applications.
📘 Quick Intro
routerLink is used to bind a route path to an anchor tag without a page reload. routerLinkActive adds a CSS class to an element when its route becomes active.
🧠 Analogy / Short Story
Imagine you're navigating tabs on a dashboard. routerLink moves you to a new tab, and routerLinkActive highlights the current tab you’re viewing.
🔧 Technical Explanation
- 🔗 routerLink: Replaces traditional href for SPA routing.
- 🎨 routerLinkActive: Applies CSS classes to highlight active links.
- ⚙️ Works with
RouterModuleand Angular’s routing engine. - 📦 Can be used with
routerLinkActiveOptionsfor exact match. - 🌐 Enables navigation within Angular components and modules.
🎯 Purpose & Use Case
- ✅ Create client-side navigation in SPAs.
- ✅ Visually indicate active navigation items in a navbar.
- ✅ Avoid full page reloads while routing.
💻 Real Code Example
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
<a [routerLink]="['/user', userId]"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
User Profile
</a>
❓ Interview Q&A
Q1: What is routerLink in Angular?
A: A directive that defines navigation routes without reloading the page.
Q2: What does routerLinkActive do?
A: It applies a CSS class to an element when its route is active.
Q3: Can routerLink take dynamic values?
A: Yes, using property binding syntax like [routerLink].
Q4: What’s the default behavior of routerLinkActive?
A: It matches any sub-route unless routerLinkActiveOptions is set to exact.
Q5: Is routerLink a replacement for href in Angular?
A: Yes, for routing inside Angular apps.
📝 MCQs
Q1. What does routerLink do?
- Triggers a reload
- Applies styles
- Navigates to a route without reloading
- Disables navigation
Q2. What is the purpose of routerLinkActive?
- Removes links
- Adds title
- Applies CSS class when route is active
- Reloads component
Q3. What attribute is used for exact route match?
- routerOptions
- exactRoute
- routerLinkActiveOptions
- matchRoute
Q4. Can routerLink take array input?
- Yes
- No
- Only in forms
- Only in services
Q5. Which directive replaces traditional href?
- routerPath
- routerLink
- ngRoute
- linkRef
Q6. What CSS class is added by routerLinkActive by default?
- default
- active-link
- active
- Specified by developer
Q7. What module is required to use routerLink?
- FormsModule
- HttpClientModule
- RouterModule
- CoreModule
Q8. Does routerLink reload the page?
- Yes
- Sometimes
- Only for POST
- No
Q9. How does Angular know a route is active?
- It checks headers
- It listens to clicks
- By comparing URL with route path
- It polls DOM
Q10. Which option ensures exact match for route?
- { route: exact }
- { active: true }
- { exact: true }
- { strict: true }
💡 Bonus Insight
Use routerLinkActive on parent elements (like <li>) to highlight entire menu items. Combine it with Angular animations for smoother navigation UI.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!