Query parameters and fragments in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular Router handle query parameters in navigation?

Consider the Angular Router navigation call:

this.router.navigate(['/products'], { queryParams: { category: 'books', sort: 'asc' } });

What will be the URL after this navigation?

A /products?category=books&sort=asc

B /products#category=books&sort=asc

C /products?category=books#sort=asc

D /products/category/books/sort/asc

💡 Hint

Query parameters appear after a question mark (?) in URLs.

Angular appends query parameters after the path using a question mark (?). Fragments use a hash (#) symbol, so they are different.

❓ state_output

intermediate

What is the value of fragment after navigation?

Given this Angular Router navigation:

this.router.navigate(['/dashboard'], { fragment: 'section2' });

What will be the fragment part of the URL?

A /dashboard?section2

B ?section2

C /dashboard#section2

D #section2

💡 Hint

Fragments start with a hash (#) symbol in URLs.

The fragment is the part after the '#' symbol in a URL. Angular sets it exactly as '#section2'.

📝 Syntax

advanced

Which option correctly reads query parameters using Angular's ActivatedRoute?

You want to read the query parameter 'id' from the URL inside a component. Which code snippet correctly does this?

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

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

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

D this.route.queryParamMap.subscribe(map => { console.log(map.get('id')); });

💡 Hint

queryParamMap provides a map with get() method for query parameters.

queryParamMap is preferred for reading query parameters because it provides a get() method. params is for route parameters, fragment is for URL fragment.

🔧 Debug

advanced

Why does this Angular Router navigation not update the URL fragment?

Code:

this.router.navigate(['/home'], { queryParams: { page: 1 }, fragment: 'top' });

But the URL changes to '/home?page=1' without '#top'. What is the likely cause?

A The router.navigate call is missing the 'preserveFragment: true' option.

B The component's routerLink directive overrides the fragment.

C The router.navigate does not update fragment if queryParams are present.

D The router.navigate call is correct; the fragment is not shown because the browser hides it.

💡 Hint

Check if any template bindings might override navigation behavior.

If a routerLink directive in the template sets a fragment, it can override programmatic navigation fragment updates.

🧠 Conceptual

expert

How does Angular Router treat query parameters and fragments during route reuse?

When navigating between routes that reuse the same component, how does Angular Router handle changes in query parameters and fragments?

A Query parameters and fragments changes do not trigger ngOnInit; you must subscribe to ActivatedRoute observables to detect changes.

B Fragments changes trigger ngOnDestroy and ngOnInit, but query parameters do not.

C Query parameters and fragments changes trigger ngOnInit to run again on the reused component.

D Angular Router reloads the entire component tree on any query parameter or fragment change.

💡 Hint

Think about Angular's reuse strategy and how observables notify changes.

Angular reuses components for the same route. ngOnInit runs once. To detect query parameter or fragment changes, subscribe to ActivatedRoute observables.

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