All 5 Routing questions
More in Routing
What is client side routing in Angular, and how do you define basic routes? How do you read a dynamic value from the URL, such as a product id, in an Angular route? How would you programmatically navigate a user to a different page after they complete an action, such as submitting a form? How would you implement nested, or child, routes in Angular for a layout with a shared parent section?
Advertisement
Back to results for “Components & Templates”
Angular › Routing

How do you create a clickable link to navigate between pages using Angular's router?

Beginner

Answer

Instead of a regular HTML anchor tag, which would cause a full page reload, Angular provides the routerLink directive that changes the current page smoothly using client side routing, while still looking and working like a normal link to the user.
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
Real-world example A website's navigation menu uses the routerLink directive instead of regular anchor tags, so clicking between pages feels instant and smooth instead of triggering a full page reload every time.

Common follow-ups: What happens if you accidentally use a regular anchor tag instead of routerLink for internal navigation?;How does the routerLinkActive directive help highlight the currently active link?

Components & Templates;Performance & Lazy Loading
All 5 Routing questions