Query parameters and fragments in Angular - Mini Project: Build & Apply

Query parameters and fragments

📖 Scenario: You are building a simple Angular app that shows a product detail page. The page URL can have query parameters to filter product options and a fragment to jump to a specific section.

🎯 Goal: Create an Angular standalone component that reads query parameters and the URL fragment from the route. Display the values on the page so users can see what filters and section are active.

📋 What You'll Learn

Create a standalone Angular component named ProductDetailComponent.

Inject Angular's ActivatedRoute to access query parameters and fragment.

Subscribe to queryParams and fragment observables to get current values.

Display the query parameters and fragment values in the component template.

Use Angular 17+ standalone component syntax with inject() and @if control flow.

💡 Why This Matters

🌍 Real World

Many web apps use query parameters and fragments to control what content is shown or to jump to sections. This project shows how Angular apps can read and display these URL parts.

💼 Career

Understanding routing and URL parameters is essential for Angular developers to build dynamic, user-friendly web applications that respond to URL changes.

1

Set up the standalone component

Create a standalone Angular component named ProductDetailComponent with a basic template that says Product Detail Page. Use the @Component decorator with standalone: true and import CommonModule.

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [CommonModule],
  template: `
    Product Detail Page
    
  `
})
export class ProductDetailComponent {
  // Your code here
}

Hint

Use @Component with standalone: true and import CommonModule. Add a simple <h1> in the template.

2

Inject ActivatedRoute and create variables

Inside ProductDetailComponent, inject ActivatedRoute using Angular's inject() function. Create two public variables: queryParams and fragment, both initialized to empty strings.

Angular

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [CommonModule],
  template: `
    Product Detail Page
    
  `
})
export class ProductDetailComponent {
  // Inject ActivatedRoute
  // Create public variables queryParams and fragment as empty strings
  // Your code here
}

Hint

Use inject(ActivatedRoute) to get the route. Create queryParams and fragment as public string variables initialized to empty strings.

3

Subscribe to queryParams and fragment

In the constructor or class body of ProductDetailComponent, subscribe to this.route.queryParams and update this.queryParams with a JSON string of the parameters. Also subscribe to this.route.fragment and update this.fragment with the fragment string or empty string if none.

Angular

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [CommonModule],
  template: `
    Product Detail Page
  `
})
export class ProductDetailComponent {
  private route = inject(ActivatedRoute);
  public queryParams = '';
  public fragment = '';

  // Subscribe to queryParams and fragment here
  // Your code here
}

Hint

Subscribe to queryParams and fragment observables. Update the component variables inside the subscription callbacks.

4

Display query parameters and fragment in template

Update the component template to show the text Query Parameters: followed by the queryParams value inside a <pre> block. Below that, show Fragment: followed by the fragment value inside a <p> tag. Use Angular's interpolation syntax.

Angular

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [CommonModule],
  template: `
    Product Detail Page
    
  `
})
export class ProductDetailComponent {
  private route = inject(ActivatedRoute);
  public queryParams = '';
  public fragment = '';

  constructor() {
    this.route.queryParams.subscribe(params => {
      this.queryParams = JSON.stringify(params);
    });
    this.route.fragment.subscribe(frag => {
      this.fragment = frag || '';
    });
  }
}

Hint

Use interpolation {{ }} to show queryParams and fragment in the template inside semantic tags.

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