Angular
RxJS & HTTP

📌 AJAX dans Angular

Effectuez des requêtes asynchrones pour mettre à jour des parties de votre page sans rechargement. Bien qu'Angular utilise souvent HttpClient, la méthode ajax() de RxJS reste une alternative puissante.

Syntaxe Rapide
ajax({
  url: "https://api.example.com/data",
  method: "GET"
}).subscribe({
  next: (response: any) => { /* succès */ },
  error: (err) => { /* erreur */ }
});

Démonstration : Liste des Produits

Erreur de chargement

Une erreur est survenue lors de la récupération des produits depuis l'API.

import { Component, OnInit } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ajax } from "rxjs/ajax";

@Component({
  selector: "app-ajax",
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="container mt-3">
      <h1>Liste des Produits</h1>
      @if (products.length > 0) {
        <div class="row mt-3">
          @for (product of products; track $index) { 
            @if ($index < 9) {
              <!-- Affichage de la carte produit -->
              <div class="col-md-4 mb-4">
                <div class="card">
                  <img [src]="product.thumbnail" [alt]="product.title" class="card-img-top" />
                  <div class="card-body">
                    <h5>{{ product.title }}</h5>
                    <p>{{ product.price }} €</p>
                  </div>
                </div>
              </div>
            }
          }
        </div>
      } @if (products.length === 0 && hasError) {
        <div class="alert alert-danger">Erreur de récupération.</div>
      }
    </div>
  `
})
export class AjaxComponent implements OnInit {
  products: any[] = [];
  hasError: boolean = false;

  ngOnInit(): void {
    const response = ajax({
      url: "https://dummyjson.com/products",
      method: "GET",
    });

    response.subscribe({
      next: (response: any) => {
        this.products = response.response.products || [];
      },
      error: () => {
        this.hasError = true;
      },
    });
  }
}