RouterLink & RouterOutlet

routerLink keeps the SPA snappy by intercepting clicks; router-outlet renders the matched component.

4 min read Level 1/5 #angular#router#navigation

What you'll learn

Build dynamic URLs with the array form of routerLink
Style active links with routerLinkActive
Use named outlets for secondary views

routerLink is a directive — not a special href. It intercepts the click, asks the Router to navigate, and updates the URL without a page reload.

Static and dynamic links

<!-- string form -->
<a routerLink="/about">About</a>

<!-- interpolated -->
<a routerLink="/users/{{ id }}">View user</a>

<!-- array form (preferred for dynamic segments) -->
<a [routerLink]="['/users', id, 'edit']">Edit</a>

The array form is type-safer and handles encoding correctly when values contain slashes or special characters.

routerLinkActive

Add a class when the current URL matches the link. Useful for nav highlighting.

<a
  routerLink="/about"
  routerLinkActive="is-active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  About
</a>

Without exact: true, / would match every route because every URL starts with /.

Named outlets

You can render a secondary view (a sidebar, modal, etc.) into its own outlet.

<router-outlet />
<router-outlet name="aux" />

{ path: 'help', component: HelpComponent, outlet: 'aux' }

Navigate to it with router.navigate([{ outlets: { aux: ['help'] } }]). Named outlets are powerful but rare — most apps only need the default outlet.

Route Parameters →