Route parameters with ActivatedRoute in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does ActivatedRoute provide route parameters?

Consider an Angular component that uses ActivatedRoute to get route parameters. Which option correctly describes how to access a parameter named id synchronously?

Angular

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // How to get 'id' parameter synchronously?
}

A const id = this.route.snapshot.paramMap.get('id');

B const id = this.route.params['id'];

C const id = this.route.paramMap.get('id');

D const id = this.route.snapshot.params.id;

💡 Hint

Use the snapshot property for synchronous access and paramMap for safer parameter retrieval.

The ActivatedRoute provides a snapshot property for synchronous access to route parameters. The paramMap is a map-like object with a get() method to retrieve parameters safely as strings or null.

Option A correctly uses this.route.snapshot.paramMap.get('id').

❓ state_output

intermediate

What is the output when subscribing to route params?

Given this Angular component code, what will be logged when the route parameter id changes from '5' to '10'?

Angular

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log(params['id']);
  });
}

A 5 then 10

B Only 10

C Only 5

D No output

💡 Hint

Subscribing to params emits every time the route parameters change.

The params observable emits a new value whenever the route parameters change. So the console will log '5' first, then '10' after the parameter changes.

📝 Syntax

advanced

Identify the syntax error in accessing route parameters

Which option contains a syntax error when trying to get the userId parameter from ActivatedRoute?

Angular

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const userId = ???
}

A const userId = this.route.snapshot.paramMap.get('userId');

B const userId = this.route.paramMap.get('userId');

C const userId = this.route.snapshot.paramMap.userId;

D const userId = this.route.snapshot.params['userId'];

💡 Hint

paramMap is a map with a get() method, not a plain object.

Option C tries to access userId as a property of paramMap, which is incorrect. paramMap requires the get() method to retrieve parameters.

🔧 Debug

advanced

Why does subscribing to params not update the component property?

In this Angular component, the userId property does not update when the route parameter changes. What is the likely cause?

Angular

userId: string | null = null;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    params['userId'];
  });
}

A The <code>params</code> observable does not emit on parameter changes.

B The subscription callback does not assign the parameter to <code>userId</code>.

C The <code>userId</code> property must be declared as a number, not string.

D The <code>ActivatedRoute</code> service is not injected properly.

💡 Hint

Check if the parameter value is assigned to the component property inside the subscription.

The subscription callback reads params['userId'] but does not assign it to this.userId. So the component property remains unchanged.

🧠 Conceptual

expert

Why use paramMap over params in ActivatedRoute?

Which reason best explains why Angular recommends using paramMap instead of params to access route parameters?

A <code>params</code> only works for query parameters, not route parameters.

B <code>params</code> is deprecated and no longer emits values on parameter changes.

C <code>paramMap</code> automatically converts parameters to numbers, while <code>params</code> returns strings.

D <code>paramMap</code> provides a consistent API with methods like <code>get()</code> and handles missing parameters gracefully.

💡 Hint

Think about API consistency and handling of missing parameters.

paramMap is a map-like object with methods like get() that return null if a parameter is missing, avoiding undefined errors. It provides a cleaner and safer API than the plain object params.