Angular
Angular Routing

Query Parameters

Les paramètres de requête (Query Params) permettent de passer des informations optionnelles dans l'URL, généralement après un point d'interrogation ? (ex: /products?category=electronics). Ils sont parfaits pour les filtres, la recherche ou la pagination.

Exemple : Filtrer une liste de produits

1. Définition de la route classique app.routes.ts

Contrairement aux paramètres dynamiques (:id), les Query Params ne nécessitent aucune configuration spéciale dans le chemin de la route.

export const routes: Routes = [
  { 
    path: 'products', // Pas besoin de déclarer de variables ici
    component: ProductListComponent 
  }
];

2. Récupération des Query Params product-list.component.ts

Pour lire les paramètres après le point d'interrogation, on s'abonne au queryParamMap du routeur.

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

@Component({
  selector: 'app-product-list',
  template: `<h2>Catégorie sélectionnée : {{ category }}</h2>`
})
export class ProductListComponent implements OnInit {
  category: string = 'Toutes';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // On s'abonne aux Query Params
    this.route.queryParamMap.subscribe(params => {
      this.category = params.get('category') || 'Toutes';
    });
  }
}

3. Lien HTML avec Query Params template.html

On utilise la directive [queryParams] en lui passant un objet contenant nos clés et nos valeurs.

<!-- L'URL générée sera : /products?category=electronics -->
<a [routerLink]="['/products']" [queryParams]="{ category: 'electronics' }" class="btn btn-primary">
  Voir les Électroniques
</a>