RouterLink for navigation in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is RouterLink used for in Angular?

RouterLink is a directive that lets you navigate between different views or pages in an Angular app by linking to routes defined in the router configuration.

beginner

How do you use RouterLink in a template to navigate to a route named 'home'?

You add [routerLink]="['/home']" to an anchor tag like this: <a [routerLink]="['/home']">Home</a>. Clicking it navigates to the 'home' route.

intermediate

What is the difference between using routerLink and a normal href for navigation?

routerLink changes the view without reloading the whole page, keeping the app fast and smooth. href reloads the entire page, which is slower and loses app state.

intermediate

How can you pass route parameters using RouterLink?

You pass parameters as part of the array, for example: [routerLink]="['/product', productId]". This navigates to a route like '/product/123' if productId is 123.

intermediate

What attribute can you use with RouterLink to add CSS classes when the link is active?

You use routerLinkActive to add CSS classes when the linked route is active. Example: <a [routerLink]="['/home']" routerLinkActive="active">Home</a>.

What does [routerLink]="['/about']" do in an Angular template?

A Reloads the entire page and goes to '/about'

B Navigates to the 'about' route without reloading the page

C Creates a button that submits a form

D Adds a CSS class named 'about'

routerLink changes the view by navigating to the route without a full page reload.

How do you pass a parameter '42' to a route named 'item' using RouterLink?

A [routerLink]="['/item?id=42']"

B [routerLink]="['/item']" param="42"

C routerLink="/item/42"

D [routerLink]="['/item', 42]"

Parameters are passed as array elements after the route path.

Which directive adds a CSS class when the linked route is active?

A routerLinkActive

B routerLinkClass

C activeLink

D routerActive

routerLinkActive adds CSS classes when the route matches the link.

What happens if you use a normal href instead of routerLink in Angular navigation?

A It throws an error

B Angular intercepts and navigates without reload

C The page reloads completely

D Nothing happens

href causes a full page reload, unlike routerLink.

Which of these is the correct way to write a RouterLink for the root path?

A [routerLink]="['/']"

B [routerLink]="['home']"

C routerLink="root"

D [routerLink]="['root']"

The root path is represented by '/' in the routerLink array.

Explain how RouterLink helps in navigating between pages in an Angular app without reloading the page.

Think about how single-page apps work.

Describe how to pass parameters to routes using RouterLink and how to highlight active links.

Focus on syntax and styling active links.