Query parameters and fragments in Angular - Step-by-Step Execution

Concept Flow - Query parameters and fragments

User clicks link or navigates

↓

Angular Router reads URL

↓

Extract query parameters and fragment

↓

Component subscribes to ActivatedRoute

↓

Component receives updated params and fragment

↓

Component updates view or logic accordingly

Angular reads the URL, extracts query parameters and fragments, then updates the component via ActivatedRoute subscriptions.

Execution Sample

Angular

this.route.queryParams.subscribe(params => {
  this.page = params['page'] || 1;
});

this.route.fragment.subscribe(fragment => {
  this.section = fragment || '';
});

Component listens to query parameters and fragment changes and updates its variables.

Execution Table

Step	URL	Query Params Extracted	Fragment Extracted	Component Variables Updated
1	/products?page=2#details	{ page: '2' }	details	page=2, section='details'
2	/products?page=3#reviews	{ page: '3' }	reviews	page=3, section='reviews'
3	/products	{}		page=1 (default), section=''
4	/products?page=5	{ page: '5' }		page=5, section=''
5	/products#summary	{}	summary	page=1 (default), section='summary'
6	Navigation ends	-	-	-

💡 No more URL changes; subscriptions complete.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
page	undefined	2	3	1	5	1	1
section	undefined	details	reviews			summary	summary

Key Moments - 3 Insights

Why does 'page' become 1 when no query parameter is present?

Because the code uses 'params['page'] || 1' which sets page to 1 if 'page' is missing, as shown in execution_table row 3.

How does the component know when the fragment changes?

The component subscribes to 'this.route.fragment', so any fragment change triggers the subscription callback, updating 'section' as in rows 1, 2, and 5.

What happens if the URL has query parameters but no fragment?

The fragment subscription receives an empty string, so 'section' is set to '', as in execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'page' after step 2?

A 3

B 2

C 1

D undefined

💡 Hint

Check the 'Component Variables Updated' column at step 2 in the execution_table.

At which step does the fragment become 'summary'?

A Step 3

B Step 5

C Step 4

D Step 1

💡 Hint

Look at the 'Fragment Extracted' column in the execution_table.

If the URL changes to '/products?page=10#top', what will 'section' be updated to?

A ''

B 10

C top

D undefined

💡 Hint

Fragment updates the 'section' variable as shown in the variable_tracker and execution_table.

Concept Snapshot

Angular reads query parameters and fragments from the URL.
Use ActivatedRoute's queryParams and fragment observables.
Subscribe to get updates when URL changes.
Use defaults if parameters are missing.
Update component variables to reflect current URL state.

Full Transcript

In Angular, when a user navigates or clicks a link, the router reads the URL and extracts query parameters and fragments. The component subscribes to these values using ActivatedRoute's queryParams and fragment observables. When these values change, the component updates its variables accordingly. For example, if the URL is '/products?page=2#details', the component sets page to 2 and section to 'details'. If a parameter is missing, a default value can be used, like page defaulting to 1. This reactive approach keeps the component in sync with the URL state.

Practice

1. In Angular, what is the main purpose of query parameters in a URL?

easy

A. To style the page dynamically

B. To define the main route path

C. To specify the component to load

D. To pass extra information to the route without changing the path

Solution

1. Step 1: Understand URL structure

   Query parameters come after a question mark (?) in URLs and carry extra data.

2. Step 2: Role in Angular routing

   Angular uses query parameters to pass optional info without changing the main route path.

3. Final Answer:

   To pass extra information to the route without changing the path -> Option D

4. Quick Check:

   Query parameters = extra info in URL [OK]

Hint: Query parameters come after ? and don't change the route path [OK]

Common Mistakes:

• Confusing query parameters with route parameters
• Thinking query parameters change the route path
• Mixing fragments with query parameters

2. Which Angular Router method is used to navigate to a route with query parameters?

easy

A. router.navigate(['/path'], { queryParams: { key: 'value' } })

B. router.go(['/path'], { params: { key: 'value' } })

C. router.route(['/path'], { query: { key: 'value' } })

D. router.change(['/path'], { queryParams: { key: 'value' } })

Solution

1. Step 1: Recall Angular Router navigation syntax

   The correct method is navigate with an array for the path and an options object.

2. Step 2: Identify correct query parameter option

   The option to pass query parameters is queryParams, not params or query.

3. Final Answer:

   router.navigate(['/path'], { queryParams: { key: 'value' } }) -> Option A

4. Quick Check:

   Use navigate() with queryParams [OK]

Hint: Use navigate() with queryParams option to add query parameters [OK]

Common Mistakes:

• Using wrong method like go() or change()
• Passing query parameters as params or query instead of queryParams
• Not wrapping path in an array

3. Given this Angular code snippet, what will be logged?

this.route.queryParams.subscribe(params => console.log(params['page']))
this.router.navigate(['/items'], { queryParams: { page: 3 } })

medium

A. Error

B. 3

C. null

D. undefined

Solution

1. Step 1: Understand queryParams subscription

   The subscription listens for query parameter changes and logs the 'page' value.

2. Step 2: Navigate with queryParams

   The navigate call sets queryParams with page: 3, triggering the subscription.

3. Final Answer:

   3 -> Option B

4. Quick Check:

   queryParams['page'] logs 3 after navigation [OK]

Hint: queryParams subscription logs updated values after navigate [OK]

Common Mistakes:

• Expecting undefined because of timing
• Confusing queryParams with route params
• Not subscribing to queryParams observable

4. What is wrong with this Angular code to read the URL fragment?

this.route.fragment.subscribe(fragment => {
  console.log(fragment.toUpperCase())
})

medium

A. subscribe() is not a function on fragment

B. fragment is always empty string, so toUpperCase() does nothing

C. fragment can be null, so calling toUpperCase() may cause error

D. You must use queryParams to get fragment

Solution

1. Step 1: Understand fragment observable behavior

   The fragment can be null if no fragment exists in the URL.

2. Step 2: Identify risk of calling toUpperCase()

   Calling toUpperCase() on null causes a runtime error.

3. Final Answer:

   fragment can be null, so calling toUpperCase() may cause error -> Option C

4. Quick Check:

   Check for null before using string methods on fragment [OK]

Hint: Check fragment for null before string methods [OK]

Common Mistakes:

• Assuming fragment is always a string
• Trying to get fragment from queryParams
• Not subscribing to fragment observable

5. You want to navigate to '/profile' with query parameters { tab: 'settings' } and fragment 'section2'. Which code correctly does this in Angular?

hard

A. this.router.navigate(['/profile'], { queryParams: { tab: 'settings' }, fragment: 'section2' })

B. this.router.navigate(['/profile'], { params: { tab: 'settings' }, hash: 'section2' })

C. this.router.navigate(['/profile'], { query: { tab: 'settings' }, fragment: 'section2' })

D. this.router.navigate(['/profile'], { queryParams: { tab: 'settings' }, hash: 'section2' })

Solution

1. Step 1: Recall correct options for navigate()

   Angular uses queryParams for query parameters and fragment for URL fragment.

2. Step 2: Check option correctness

   this.router.navigate(['/profile'], { queryParams: { tab: 'settings' }, fragment: 'section2' }) uses correct keys: queryParams and fragment. Others use incorrect keys like params, query, or hash.

3. Final Answer:

   this.router.navigate(['/profile'], { queryParams: { tab: 'settings' }, fragment: 'section2' }) -> Option A

4. Quick Check:

   Use queryParams and fragment keys in navigate() [OK]

Hint: Use queryParams and fragment keys in navigate() options [OK]

Common Mistakes:

• Using params or query instead of queryParams
• Using hash instead of fragment
• Not passing path as array