Query parameters and fragments in Angular

Introduction

Query parameters and fragments help you send extra information in URLs. They let your app show different content or jump to parts of a page.

You want to filter a list on a page without changing the main URL path.

You want to remember user choices like sorting or search terms in the URL.

You want to link to a specific section inside a page using a fragment.

You want to share a URL that opens a page with special settings or views.

You want to read extra info from the URL to change what the page shows.

Syntax

Angular

this.router.navigate(['/path'], { queryParams: { key: 'value' }, fragment: 'section' });

queryParams is an object with key-value pairs for the URL query string.

fragment is a string that points to a part of the page after the # symbol.

Examples

This navigates to /products?category=books&sort=price

Angular

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

This navigates to /profile#settings, jumping to the settings section.

Angular

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

This navigates to /search?q=angular#results, showing search results and jumping to them.

Angular

this.router.navigate(['/search'], { queryParams: { q: 'angular' }, fragment: 'results' });

Sample Program

This component shows how to navigate with query parameters and fragments. When you click the button, it goes to /products?category=books#top. It also listens to the URL and shows the current category and fragment on the page.

Angular

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-query-example',
  template: `
    <h2>Query Params and Fragment Example</h2>
    <button (click)="goToPage()">Go to Products with Filters</button>
    <p>Current category: {{ category }}</p>
    <p>Current fragment: {{ fragment }}</p>
  `
})
export class QueryExampleComponent {
  category = '';
  fragment = '';

  constructor(private router: Router, private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      this.category = params['category'] || 'none';
    });
    this.route.fragment.subscribe(frag => {
      this.fragment = frag || 'none';
    });
  }

  goToPage() {
    this.router.navigate(['/products'], { queryParams: { category: 'books' }, fragment: 'top' });
  }
}

Important Notes

Query parameters and fragments do not reload the whole page but update the URL and app state.

Use ActivatedRoute to read query parameters and fragments inside your components.

Fragments usually scroll the page to the matching element with the same id.

Summary

Query parameters add extra info after ? in URLs to filter or customize views.

Fragments add a # part to jump to sections inside a page.

Angular's router lets you set and read these easily with navigate and ActivatedRoute.

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