Route parameters with ActivatedRoute in Angular - Step-by-Step Execution

Concept Flow - Route parameters with ActivatedRoute

User navigates to URL with parameter

↓

Angular Router matches route

↓

Component loads

↓

ActivatedRoute reads parameter

↓

Component uses parameter value

↓

Display or process parameter in template

When a user visits a URL with a parameter, Angular Router loads the component and ActivatedRoute reads the parameter so the component can use it.

Execution Sample

Angular

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.id = params.get('id');
  });
}

This code listens for the 'id' parameter from the route and saves it in the component.

Execution Table

Step	Action	ActivatedRoute.paramMap	Parameter 'id'	Component Property 'id'
1	Component initialized	paramMap observable created	null	undefined
2	User navigates to /items/42	paramMap emits new params	'42'	undefined
3	Subscription callback runs	paramMap current value	'42'	'42' assigned
4	Component template updates	paramMap unchanged	'42'	'42' displayed
5	User navigates to /items/100	paramMap emits new params	'100'	'42'
6	Subscription callback runs	paramMap current value	'100'	'100' assigned
7	Component template updates	paramMap unchanged	'100'	'100' displayed
8	User leaves route	paramMap completes or unsubscribed	null	'100'

💡 User leaves route or component destroyed, subscription ends

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
paramMap	observable created	emits params with id='42'	emits params with id='100'	subscription ends
id (component property)	undefined	'42'	'100'	'100'

Key Moments - 2 Insights

Why do we use subscribe on paramMap instead of reading it once?

Because route parameters can change while the component is active, subscribing lets us react to each change as shown in steps 3 and 6 of the execution_table.

What happens if the parameter 'id' is missing in the URL?

The paramMap.get('id') returns null, so the component property 'id' becomes null, as paramMap emits new values only when parameters change.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'id' after step 3?

A '42'

B '100'

C undefined

D null

💡 Hint

Check the 'Component Property id' column at step 3 in the execution_table.

At which step does the component update 'id' to '100'?

A Step 2

B Step 4

C Step 6

D Step 8

💡 Hint

Look for when 'id' changes from '42' to '100' in the execution_table.

If the user navigates to a URL without 'id', what will paramMap.get('id') return?

A '0'

B null

C undefined

D empty string

💡 Hint

Refer to key_moments about missing parameters and paramMap behavior.

Concept Snapshot

Route parameters let components get values from the URL.
Use ActivatedRoute.paramMap.subscribe() to watch for changes.
Access parameters with paramMap.get('paramName').
Update component properties inside subscription.
This keeps the component in sync with URL changes.

Full Transcript

When a user visits a URL with a parameter, Angular Router loads the matching component. The component uses ActivatedRoute to access the route parameters. ActivatedRoute has a paramMap observable that emits the current parameters. The component subscribes to paramMap to get notified when parameters change. Inside the subscription callback, the component reads the parameter value using paramMap.get('id') and saves it to a property. This property can then be used in the template to display or process the parameter. If the user navigates to a different URL with a new parameter, the subscription callback runs again with the new value. If the parameter is missing, paramMap.get returns null. This approach ensures the component always has the latest parameter value while it is active.