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
}

Need a 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
}

Need a 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
}

Need a 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 || '';
    });
  }
}

Need a hint?

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