Angular Routing Basics
Fast recall
Quick revision
Core answer
Whether you understand routes (path→component), routerLink for links, router-outlet as the mount point, and how to read route params (ActivatedRoute).
Using href instead of routerLink (causes a full page reload), or forgetting <router-outlet> (nothing renders).
Routes map path→component; routerLink is the declarative link; router-outlet is where the component renders; ActivatedRoute reads params.
Interview-ready guide
Interview answer
Angular's router lets a single-page app behave like multiple pages by mapping URL paths to components.
You define a Routes array that pairs a path with a component, register it with RouterModule, and place a router-outlet in the host component where the matched route's component renders. For navigation you use routerLink, a directive on anchor tags that updates the URL without a full reload — this is the Angular equivalent of href but without the page reload, so you should never use href in an Angular SPA.
For imperative navigation from code you use the Router service's navigate method. The router also supports route parameters, like a users-slash-id path, which a component reads via the ActivatedRoute service's paramMap. The common mistakes are using href instead of routerLink, which causes a full page reload, forgetting the router-outlet so the matched component has nowhere to render, and not handling subscriptions when reading route params.
Angular Routing Basics
Direct Answer
Angular's router maps URL paths to components, so navigating to a path displays a specific component inside a <router-outlet>. You configure routes in a Routes array (path → component), register them with RouterModule, use routerLink for declarative links (the Angular equivalent of <a href>), and Router.navigate() for imperative navigation. The router handles browser URL changes, lazy-loads route modules for performance, and passes route parameters (/:id) that a component reads via ActivatedRoute.
Code Example
// (1) ROUTES: an array of path -> component.
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'users/:id', component: UserDetailComponent }, // param route
{ path: '', redirectTo: 'home', pathMatch: 'full' }, // default
];
@NgModule({ imports: [RouterModule.forRoot(routes)] })
export class AppRoutingModule {}
// (2) ROUTER-OUTLET: where the matched component renders.
// <router-outlet></router-outlet> <- in the host template
// (3) ROUTERLINK: declarative links (NO full reload, unlike href).
// <a routerLink="/home">Home</a>
// <a [routerLink]="['/users', user.id]">User</a> // param link
// (4) READ PARAMS in the component via ActivatedRoute.
export class UserDetailComponent {
constructor(private route: ActivatedRoute) {}
ngOnInit() { this.route.paramMap.subscribe(p => this.id = p.get('id')); }
}
Common Mistakes & Pitfalls
- Using href instead of routerLink — href causes a full page reload, defeating the SPA router.
- Forgetting <router-outlet> in the host — the matched component has nowhere to render.
- Not subscribing to paramMap (or not unsubscribing) when reading route params.
Check your understanding
Answer these without looking back at the article.
- What is a route, and how does the router map a URL to a component?
- What is <router-outlet> for, and what happens without it?
- Why use routerLink instead of href in an Angular SPA?
- How do you read a route parameter (:id) in a component (ActivatedRoute)?
Looking for a structured roadmap?
Every module on this page is also part of the full Java backend interview track.