Générateur de snippets Angular en ligne — Components, Services, Pipes, Directives

Comment utiliser ces snippets

Ce générateur produit du code Angular prêt à l'emploi. Chaque snippet est personnalisable via les options en haut de l'outil : nom du composant, sélecteur CSS, version Angular et nom du module feature.

Components Angular

Le Component est le bloc de base de toute application Angular. Depuis Angular 15, le mode standalone permet de se passer des NgModule et de simplifier l'architecture.

Component standalone (Angular 15+)

Un component standalone importe directement ses dépendances dans le décorateur @Component, sans passer par un module parent.

// user-profile.component.ts
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

// Décorateur @Component avec standalone: true (Angular 15+)
@Component({
  selector: 'app-user-profile',
  standalone: true,                    // Pas besoin de NgModule
  imports: [CommonModule],             // Modules nécessaires importés directement
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush  // Meilleure perf
})
export class UserProfileComponent implements OnInit {

  constructor() {}

  // Lifecycle hook appelé après l'initialisation du composant
  ngOnInit(): void {
    // Charger les données ici
  }
}

Component avec formulaire réactif

Les Reactive Forms offrent un contrôle total sur la validation et l'état du formulaire via le FormBuilder et les Validators.

// login.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule]  // Importer ReactiveFormsModule
})
export class LoginComponent implements OnInit {
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // Initialiser le groupe de contrôles avec validateurs
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });
  }

  onSubmit(): void {
    // Vérifier la validité avant d'envoyer
    if (this.form.valid) {
      console.log('Données du formulaire :', this.form.value);
    }
  }
}

Services Angular

Les services Angular encapsulent la logique métier et les appels HTTP. Grâce à l'injection de dépendances, ils sont partagés entre tous les composants qui en ont besoin.

Service HTTP CRUD complet

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

// Interface pour typer les données
export interface User {
  id: number;
  name: string;
  email: string;
}

// providedIn: 'root' = singleton disponible dans toute l'app
@Injectable({ providedIn: 'root' })
export class UserService {
  // URL de l'API REST
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  // GET /users — récupère tous les utilisateurs
  getAll(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl).pipe(
      retry(1),                         // Réessayer 1 fois en cas d'erreur réseau
      catchError(this.handleError)
    );
  }

  // GET /users/:id — récupère un utilisateur par ID
  getById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`).pipe(
      catchError(this.handleError)
    );
  }

  // POST /users — crée un nouvel utilisateur
  create(data: Partial<User>): Observable<User> {
    return this.http.post<User>(this.apiUrl, data).pipe(
      catchError(this.handleError)
    );
  }

  // PUT /users/:id — met à jour un utilisateur existant
  update(id: number, data: Partial<User>): Observable<User> {
    return this.http.put<User>(`${this.apiUrl}/${id}`, data).pipe(
      catchError(this.handleError)
    );
  }

  // DELETE /users/:id — supprime un utilisateur
  delete(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`).pipe(
      catchError(this.handleError)
    );
  }

  // Gestion centralisée des erreurs HTTP
  private handleError(err: HttpErrorResponse): Observable<never> {
    const message = err.error instanceof ErrorEvent
      ? err.error.message          // Erreur côté client
      : `Erreur serveur ${err.status}`;
    return throwError(() => new Error(message));
  }
}

Service avec BehaviorSubject (state management)

Le BehaviorSubject permet de gérer un état local réactif sans librairie externe (NgRx, Akita…). Idéal pour les états simples à l'échelle d'une feature.

// cart-state.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

export interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

@Injectable({ providedIn: 'root' })
export class CartStateService {
  // BehaviorSubject garde la dernière valeur en mémoire
  private _items = new BehaviorSubject<CartItem[]>([]);

  // Exposer uniquement l'Observable en lecture seule
  readonly items$: Observable<CartItem[]> = this._items.asObservable();

  // Remplacer tout le panier
  setItems(items: CartItem[]): void {
    this._items.next(items);
  }

  // Ajouter un article (spread pour immuabilité)
  addItem(item: CartItem): void {
    this._items.next([...this._items.getValue(), item]);
  }

  // Supprimer par ID
  removeItem(id: number): void {
    this._items.next(
      this._items.getValue().filter(i => i.id !== id)
    );
  }

  // Lire la valeur courante sans s'abonner
  get total(): number {
    return this._items.getValue().reduce((s, i) => s + i.price * i.quantity, 0);
  }

  // Vider le panier
  clearItems(): void {
    this._items.next([]);
  }
}

Pipes et Directives

Pipe de troncature (pure)

Un Pipe transforme une valeur dans le template. Un pipe pure: true (défaut) n'est recalculé que si la valeur d'entrée change.

// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

// Déclaration du pipe standalone, pure par défaut
@Pipe({
  name: 'truncate',
  standalone: true,
  pure: true   // Recalcul uniquement si la valeur change (perf optimale)
})
export class TruncatePipe implements PipeTransform {

  // transform() : méthode principale appelée dans le template
  // value : la chaîne à tronquer
  // limit : nombre maximum de caractères (défaut: 100)
  // suffix : chaîne ajoutée à la fin si troncature (défaut: '...')
  transform(value: string, limit: number = 100, suffix: string = '...'): string {
    if (!value) return '';  // Sécurité : valeur nulle ou vide
    return value.length > limit
      ? value.substring(0, limit) + suffix
      : value;
  }
}

<!-- Utilisation dans le template -->
<p>{{ article.content | truncate:150 }}</p>
<p>{{ article.content | truncate:80:'…' }}</p>

Directive attribut (Highlight)

Une Directive attribut modifie l'apparence ou le comportement d'un élément HTML existant. Elle n'a pas de template propre.

// highlight.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

// [appHighlight] : sélecteur attribut
@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {

  // Couleur configurable via Input (par défaut : jaune clair)
  @Input() highlightColor: string = '#fffde7';
  @Input() defaultColor: string   = '';

  constructor(private el: ElementRef) {}

  // HostListener écoute les événements DOM de l'élément hôte
  @HostListener('mouseenter') onMouseEnter(): void {
    this.setBackground(this.highlightColor);
  }

  @HostListener('mouseleave') onMouseLeave(): void {
    this.setBackground(this.defaultColor);
  }

  // Méthode privée pour modifier le style
  private setBackground(color: string): void {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Guards et Resolvers

AuthGuard fonctionnel (Angular 15+)

Depuis Angular 15, les guards s'écrivent sous forme de fonctions (CanActivateFn) plutôt que de classes, ce qui simplifie l'injection de dépendances via inject().

// auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

// Guard fonctionnel : pas de classe, injection via inject()
export const authGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const authService = inject(AuthService);  // Injection du service d'auth
  const router      = inject(Router);       // Injection du routeur

  // Si l'utilisateur est connecté, autoriser l'accès
  if (authService.isLoggedIn()) {
    return true;
  }

  // Sinon, rediriger vers /login avec l'URL de retour
  return router.createUrlTree(
    ['/login'],
    { queryParams: { returnUrl: state.url } }  // Mémoriser la page demandée
  );
};

// Utilisation dans les routes :
// { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] }

Resolver de données HTTP

Un Resolver précharge les données avant d'afficher la page. Cela évite l'affichage d'un loader dans le template.

// user.resolver.ts
import { inject } from '@angular/core';
import { ResolveFn, ActivatedRouteSnapshot, Router } from '@angular/router';
import { Observable, EMPTY, catchError } from 'rxjs';
import { UserService, User } from './user.service';

// ResolveFn<T> : type fonctionnel du resolver
export const userResolver: ResolveFn<User> = (
  route: ActivatedRouteSnapshot
): Observable<User> => {
  const userService = inject(UserService);
  const router      = inject(Router);

  // Lire le paramètre :id dans l'URL
  const id = Number(route.paramMap.get('id'));

  return userService.getById(id).pipe(
    catchError(() => {
      // En cas d'erreur (ex: 404), rediriger vers la page d'accueil
      router.navigateByUrl('/');
      return EMPTY;  // Annuler la navigation
    })
  );
};

// Utilisation dans les routes :
// { path: 'user/:id', component: UserDetailComponent, resolve: { user: userResolver } }

Extensions VS Code recommandées

Ces extensions améliorent significativement la productivité lors du développement Angular.

Architecture Angular recommandée

Une architecture Angular bien structurée facilite la maintenance et la scalabilité. Le pattern Core / Shared / Feature est le plus répandu dans les projets professionnels.

// Structure de dossiers recommandée (Angular 15+ standalone)
src/
  app/
    core/                        // Services globaux, guards, interceptors
      services/
        auth.service.ts
      interceptors/
        auth.interceptor.ts
      guards/
        auth.guard.ts
    shared/                      // Components, pipes, directives réutilisables
      components/
        button/
        card/
      pipes/
        truncate.pipe.ts
      directives/
        highlight.directive.ts
    features/                    // Un dossier par fonctionnalité (lazy loaded)
      dashboard/
        dashboard.component.ts
        dashboard.routes.ts
      users/
        users.component.ts
        users.routes.ts
    app.component.ts
    app.config.ts                // Configuration standalone (remplace AppModule)
    app.routes.ts                // Routes principales

Conclusion

Ce générateur de snippets Angular vous permet de démarrer rapidement avec les patterns les plus utilisés en production : components standalone, services HTTP/BehaviorSubject, pipes purs, directives attributs, guards fonctionnels et resolvers.

Chaque snippet est personnalisable via les options et compatible avec Angular 14 (NgModule) et Angular 15+ (standalone). Copiez, adaptez et intégrez directement dans votre projet sans repartir de zéro.