📚 Cheatsheet

Une collection organisée de snippets de code pour accélérer votre développement. Parcourez, recherchez et copiez en un clic.

Snippets 18

Retour
RxJS - BehaviorSubject
Avancé
private utilisateurActuelSource = new BehaviorSubject<User | null>(null);
utilisateurActuel$ = this.utilisateurActuelSource.asObservable();

definirUtilisateur(user: User) {
  this.utilisateurActuelSource.next(user);
}
RxJS - forkJoin pour requêtes parallèles
Avancé
const requete1 = this.http.get('/api/data1');
const requete2 = this.http.get('/api/data2');

forkJoin([requete1, requete2]).subscribe(resultats => {
  const data1 = resultats[0];
  const data2 = resultats[1];
});
RxJS - Opérateur catchError
Avancé
this.http.get('...').pipe(
  catchError(err => {
    console.error('Erreur HTTP:', err);
    return throwError(() => new Error('Oups !'));
  })
).subscribe();
RxJS - Opérateur filter
Intermédiaire
from([1, 2, 3, 4, 5]).pipe(
  filter(num => num % 2 === 0)
).subscribe(num => console.log(num)); // 2, 4
RxJS - Opérateur map
Intermédiaire
this.http.get<any[]>('...').pipe(
  map(users => users.map(user => user.name))
).subscribe(noms => console.log(noms));
RxJS - Opérateur switchMap
Avancé
this.rechercheInput.valueChanges.pipe(
  debounceTime(300),
  switchMap(terme => this.api.rechercher(terme))
).subscribe(resultats => ...);
RxJS - Opérateur take
Intermédiaire
interval(1000).pipe(
  take(5) // Prend les 5 premières valeurs puis complète
).subscribe(x => console.log(x));
RxJS - Opérateur tap
Intermédiaire
this.http.get('...').pipe(
  tap(data => console.log('Données brutes:', data)),
  map(data => data.results)
).subscribe();
RxJS - S'abonner à un Observable
Intermédiaire
this.donneesService.obtenirDonnees().subscribe({
  next: donnees => console.log(donnees),
  error: err => console.error(err),
  complete: () => console.log('Observation terminée')
});
RxJS - Subject pour communication entre composants
Avancé
// Dans un service
private actionSource = new Subject<string>();
action$ = this.actionSource.asObservable();

notifierAction(action: string) {
  this.actionSource.next(action);
}
Service - Création et Injection
Intermédiaire
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DonnesService {
  constructor() { }
}
Service - HttpClient avec des paramètres
Intermédiaire
import { HttpParams } from '@angular/common/http';

rechercher(terme: string) {
  const params = new HttpParams().set('q', terme);
  return this.http.get('/api/search', { params });
}