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.