RouterLink for navigation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a RouterLink that navigates to the 'home' path.

Angular

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

Drag options to blanks, or click blank then click option'

Anavigate

Bhref

ClinkTo

DrouterLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of routerLink causes a full page reload.

Using linkTo or navigate are not valid Angular template attributes.

The routerLink directive is used in Angular templates to create navigation links that Angular Router understands.

2fill in blank

medium

Complete the code to bind the RouterLink to a variable named 'path'.

Angular

<a [[1]]="path">Go</a>

Drag options to blanks, or click blank then click option'

ArouterLink

Bhref

CrouterLinkActive

Dlink

Attempts:

3 left

💡 Hint

Common Mistakes

Using href with binding syntax is incorrect.

routerLinkActive is for styling active links, not for navigation.

Using square brackets [] binds the routerLink directive to a variable in the component.

3fill in blank

hard

Fix the error in the RouterLink syntax to navigate to 'dashboard'.

Angular

<a routerLink=[1]>Dashboard</a>

Drag options to blanks, or click blank then click option'

A[dashboard]

Bdashboard

C'dashboard'

D"dashboard"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes causes Angular to look for a variable named dashboard.

Using double quotes inside double quotes without escaping causes syntax errors.

When using RouterLink without binding brackets, the path must be a string literal wrapped in single quotes.

4fill in blank

hard

Fill both blanks to create a RouterLink that navigates to 'profile' and applies the 'active' class when active.

Angular

<a [1]="'/profile'" [2]="'active'">Profile</a>

Drag options to blanks, or click blank then click option'

ArouterLink

Bhref

CrouterLinkActive

DclassActive

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of routerLink breaks Angular routing.

Using classActive is not a valid Angular directive.

routerLink sets the navigation path, and routerLinkActive adds a CSS class when the link is active.

5fill in blank

hard

Fill all three blanks to create a RouterLink with a bound path, an active class, and a title attribute.

Angular

<a [[1]]="userPath" [2]="'selected'" title=[3]>User</a>

Drag options to blanks, or click blank then click option'

ArouterLink

BrouterLinkActive

C'User Profile'

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of routerLink breaks Angular routing.

Not quoting the title string causes errors.

Bind routerLink to the variable, use routerLinkActive for the active class, and set a title attribute with a string.