Route parameters with ActivatedRoute in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the ActivatedRoute service.

Angular

import { [1] } from '@angular/router';

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

ARouterModule

BRoutes

CRouterOutlet

DActivatedRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Importing RouterModule instead of ActivatedRoute

Using RouterOutlet which is a component, not a service

The ActivatedRoute service is imported from @angular/router to access route parameters.

2fill in blank

medium

Complete the constructor to inject ActivatedRoute.

Angular

constructor(private [1]: ActivatedRoute) {}

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

Aroute

Brouter

Cactivated

DrouterService

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated names like routerService

Using router which is a different service

The common convention is to name the injected ActivatedRoute as route in the constructor.

3fill in blank

hard

Fix the error in accessing the route parameter named 'id'.

Angular

this.route.params.subscribe(params => {
  this.id = params[1];
});

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

A['id']

B.id()

C.get('id')

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation with parentheses like .id()

Using .get() which is not a method on params

Using just id without quotes or brackets

Route parameters are accessed as properties of the params object using bracket notation like params['id'].

4fill in blank

hard

Complete the code to correctly get the 'userId' parameter from the snapshot.

Angular

const userId = this.route[1].params['userId'];

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

Asnapshot

BqueryParams

Dparent

Attempts:

3 left

💡 Hint

Common Mistakes

Using queryParams instead of params

Adding parentheses after params

Using parent which refers to parent route

To get a route parameter from the snapshot, use this.route.snapshot.params['userId']. The second blank is empty because params is a property, not a function.

5fill in blank

hard

Fill both blanks to subscribe to route params and assign 'productId' to a variable.

Angular

this.route[1].subscribe(params => {
  this.productId = params[[2]];
});

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

A.params

C'productId'

Dsnapshot

Attempts:

3 left

💡 Hint

Common Mistakes

Using snapshot instead of params for subscription

Using dot notation instead of bracket notation

Not using quotes around the parameter name

Subscribe to this.route.params observable, then access the 'productId' parameter using params['productId']. The third blank is the string key for the parameter.