RouterLink for navigation in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when RouterLink is used incorrectly?

Consider this Angular template snippet:

<a routerLink="['/home']">Home</a>

What will be the result when this link is clicked?

Angular

<a routerLink="['/home']">Home</a>

A The app navigates to the '/home' route as expected.

B The app throws a runtime error because routerLink expects a string, not an array.

C The link reloads the entire page instead of navigating within the app.

D Nothing happens because routerLink is not a valid attribute.

💡 Hint

RouterLink can accept both strings and arrays for navigation paths.

In Angular, routerLink can be used with a string or an array of path segments. Using an array like ['/home'] is valid and navigates correctly.

📝 Syntax

intermediate

Which RouterLink syntax correctly navigates to a child route?

You want to navigate to the child route '/products/details'. Which RouterLink syntax is correct?

A <a routerLink="['products/details']">Details</a>

B <a routerLink="'/products/details'">Details</a>

C <a [routerLink]="['/products', 'details']">Details</a>

D <a routerLink="products/details">Details</a>

💡 Hint

RouterLink array syntax splits path segments by commas.

Using an array with separate segments like ['/products', 'details'] correctly navigates to the child route. The string '/products/details' also works but must be quoted properly.

🔧 Debug

advanced

Why does this RouterLink not navigate as expected?

Given this template:

<a [routerLink]="['/dashboard']">Dashboard</a>

Clicking the link does not navigate. What is the likely cause?

Angular

<a [routerLink]="['/dashboard']">Dashboard</a>

A The RouterModule is not imported in the Angular module.

B The routerLink directive requires parentheses, like routerLink().

C The path '/dashboard' is invalid because it lacks a trailing slash.

D The link must use href instead of routerLink for navigation.

💡 Hint

RouterLink needs RouterModule to work properly.

If RouterModule is not imported in the Angular module, routerLink directives won't function and clicking links won't navigate.

❓ state_output

advanced

What is the value of the href attribute rendered by RouterLink?

Given this Angular template:

<a [routerLink]="['/profile', userId]">Profile</a>

and userId = 42, what is the href attribute value in the rendered HTML?

Angular

userId = 42

A "/profile?userId=42"

B "/profile/42"

C "/profile,userId"

D "/profile/"

💡 Hint

RouterLink builds the URL by joining path segments.

RouterLink joins the array segments into a path, so ['/profile', 42] becomes '/profile/42' in the href attribute.

🧠 Conceptual

expert

Which statement about RouterLink and accessibility is true?

Select the correct statement about using RouterLink for navigation and accessibility best practices.

A RouterLink disables default link behavior, so you must add ARIA labels manually.

B RouterLink automatically manages keyboard focus and ARIA roles for all links.

C RouterLink requires adding tabindex="0" to enable keyboard navigation.

D Using RouterLink on <a> tags preserves native keyboard navigation and screen reader support.

💡 Hint

Think about how native tags behave with keyboard and screen readers.

Using RouterLink on tags keeps native link behavior, preserving keyboard navigation and screen reader accessibility without extra attributes.