RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for <a> tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard <a href="...">, which reloads the page and loses application state.
Why it exists
In a Single-Page Application (SPA), the entire app lives on one HTML page. Using a traditional link causes the browser to request a new page from the server, resulting in a full page reload. This is slow, inefficient, and destroys any state held in the application's memory. RouterLink was created to manage navigation within the application without this reload.
The mental model
Think of RouterLink as a smart tag built for SPAs. Instead of telling the browser "go fetch this URL", it tells the Angular Router "please display the component(s) associated with this route". The browser's URL bar updates, but the page itself doesn't reload. It's the difference between walking to another room in your house versus driving to a new house entirely.
How it works
RouterLink is an attribute directive you add to an element. You pass it a path as a string or an array. When a user clicks the element, RouterLink intercepts the click, prevents the browser's default navigation behavior, and passes the request to the Angular Router service. The Router then figures out which component matches the new path and renders it inside the corresponding <router-outlet>, all on the client side.
When to use it
Use RouterLink for all standard, user-facing navigation within your Angular application. This includes navigation bars, lists of items that link to detail pages, and any button or link that should take the user to a different "page" or view inside the app. It is the default choice for declarative navigation.
When not to use it
Do not use RouterLink for links that are intended to navigate away from your application, such as linking to an external website or a downloadable file. For those cases, a standard is the correct tool. For programmatic navigation (e.g., navigating after a form submission), you would inject the Router service in your component and call router.navigate() instead.
One canonical example
To create a link to a user's profile page with an ID of 42, you would write View Profile. The routerLink directive tells Angular to navigate to the /users/42 path when clicked. This is far superior to , which would cause a full page reload.
Interview question
In an Angular Single-Page Application, why is RouterLink preferred over a standard <a> tag for navigating between different views within the app?
- a.RouterLink directs the Angular Router to render new components without a full page reload, preserving application state.Correct
- b.RouterLink ensures that the browser performs a full page reload to fetch new components, guaranteeing up-to-date content.
- c.RouterLink is primarily used for navigating to external websites, while <a> tags are for internal routes.
- d.RouterLink automatically injects the Router service into the component, eliminating the need for manual injection.
Why? this is the answer
RouterLink's core purpose is to enable client-side navigation in SPAs, preventing full page reloads that would destroy application state and providing a smoother user experience. Option B describes the exact opposite behavior, and Option C misrepresents its intended use case.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles