Les entretiens techniques Angular évaluent la compréhension de l'architecture du framework, de TypeScript, et des bonnes pratiques de développement frontend. Ce guide présente les 25 questions les plus fréquentes avec des réponses détaillées et des exemples de code pour une préparation optimale. Ces questions couvrent les versions récentes d'Angular (16+), incluant les Signals, les standalone components et le nouveau control flow. Maîtriser ces concepts modernes démontre une veille technologique active. ## Fondamentaux Angular ### 1. Quelle est la différence entre Angular et AngularJS ? Angular (versions 2+) est une réécriture complète d'AngularJS. Les différences majeures concernent l'architecture, le langage et les performances. AngularJS utilisait JavaScript et le pattern MVC avec un système de two-way binding qui pouvait causer des problèmes de performance. Angular utilise TypeScript, une architecture basée sur les composants, et un système de détection de changement optimisé. ```typescript // AngularJS (1.x) - Controller-based // angular.module('app').controller('UserController', function($scope) { // $scope.user = { name: 'Alice' }; // }); // Angular (2+) - Component-based // user.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-user', standalone: true, template: `

` }) export class UserComponent { // Typage fort avec TypeScript user = { name: 'Alice', email: 'alice@example.com' }; } ``` Angular apporte également le support natif des modules ES6, un meilleur outillage avec Angular CLI, et une architecture plus adaptée aux applications d'entreprise. ### 2. Qu'est-ce qu'un composant Angular et comment le créer ? Un composant Angular est une classe TypeScript décorée avec `@Component`. Il encapsule la logique, le template et les styles d'une partie de l'interface utilisateur. ```typescript // product-card.component.ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import { CommonModule } from '@angular/common'; // Interface pour le typage fort interface Product { id: number; name: string; price: number; inStock: boolean; } @Component({ // Sélecteur CSS pour utiliser le composant selector: 'app-product-card', // Standalone = pas besoin de NgModule standalone: true, // Imports des dépendances imports: [CommonModule], // Template inline ou externe (templateUrl) template: `

@if (product.inStock) { } @else { Rupture de stock }

`, // Styles encapsulés par défaut styles: [` .product-card { padding: 1rem; border: 1px solid #e0e0e0; } .price { font-weight: bold; color: #2563eb; } .out-of-stock { color: #dc2626; } `] }) export class ProductCardComponent { // Input : données du parent @Input({ required: true }) product!: Product; // Output : événements vers le parent @Output() addToCart = new EventEmitter(); onAddToCart() { this.addToCart.emit(this.product.id); } } ``` Les composants standalone (Angular 14+) simplifient la création en éliminant le besoin de déclarer le composant dans un NgModule. ### 3. Expliquez le cycle de vie d'un composant Angular Angular fournit des hooks de cycle de vie permettant d'exécuter du code à des moments précis de la vie d'un composant. ```typescript // lifecycle-demo.component.ts import { Component, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, Input, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-lifecycle-demo', standalone: true, template: `

` }) export class LifecycleDemoComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy { @Input() data = ''; // 1. Appelé quand un @Input change (avant ngOnInit) ngOnChanges(changes: SimpleChanges) { console.log('ngOnChanges', changes); } // 2. Appelé une fois après le premier ngOnChanges // Idéal pour les initialisations ngOnInit() { console.log('ngOnInit - Initialisation du composant'); } // 3. Appelé à chaque cycle de détection de changement // À utiliser avec précaution (performance) ngDoCheck() { console.log('ngDoCheck'); } // 4. Après projection du contenu (ng-content) ngAfterContentInit() { console.log('ngAfterContentInit'); } // 5. Après chaque vérification du contenu projeté ngAfterContentChecked() { console.log('ngAfterContentChecked'); } // 6. Après initialisation de la vue du composant // Les @ViewChild sont disponibles ici ngAfterViewInit() { console.log('ngAfterViewInit - Vue initialisée'); } // 7. Après chaque vérification de la vue ngAfterViewChecked() { console.log('ngAfterViewChecked'); } // 8. Juste avant la destruction du composant // Nettoyage : unsubscribe, clearInterval, etc. ngOnDestroy() { console.log('ngOnDestroy - Nettoyage'); } } ``` Les hooks les plus utilisés sont `ngOnInit` pour l'initialisation, `ngOnChanges` pour réagir aux changements d'inputs, et `ngOnDestroy` pour le nettoyage des ressources. ### 4. Qu'est-ce que le Data Binding dans Angular ? Le data binding connecte les données du composant au template. Angular propose quatre formes de binding. ```typescript // data-binding.component.ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-data-binding', standalone: true, imports: [FormsModule], template: `

Bonjour, {{ username }}

` }) export class DataBindingComponent { // Propriétés pour l'interpolation title = 'Mon Application'; firstName = 'Jean'; lastName = 'Dupont'; // Propriétés pour le property binding imageUrl = '/assets/logo.png'; imageAlt = 'Logo de l\'application'; isLoading = false; // Propriété pour le two-way binding username = ''; getFullName(): string { return `${this.firstName} ${this.lastName}`; } handleClick(): void { console.log('Bouton cliqué'); } onEnter(event: KeyboardEvent): void { const target = event.target as HTMLInputElement; console.log('Valeur saisie:', target.value); } } ``` Le two-way binding `[(ngModel)]` est une combinaison du property binding et de l'event binding, permettant une synchronisation automatique entre le modèle et la vue. ### 5. Quelle est la différence entre un Module et un Composant Standalone ? Les NgModules regroupent des composants, directives et services liés. Les standalone components (Angular 14+) permettent de créer des composants autonomes sans module. ```typescript // Approche traditionnelle avec NgModule // products.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ProductListComponent } from './product-list.component'; import { ProductCardComponent } from './product-card.component'; import { ProductService } from './product.service'; @NgModule({ // Composants appartenant à ce module declarations: [ ProductListComponent, ProductCardComponent ], // Modules dont on a besoin imports: [CommonModule], // Composants utilisables à l'extérieur exports: [ProductListComponent], // Services avec scope module providers: [ProductService] }) export class ProductsModule {} // Approche moderne avec Standalone Components // product-list.component.ts import { Component, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ProductCardComponent } from './product-card.component'; import { ProductService } from './product.service'; @Component({ selector: 'app-product-list', // Pas besoin de NgModule standalone: true, // Imports directs des dépendances imports: [CommonModule, ProductCardComponent], template: ` @for (product of products(); track product.id) { } ` }) export class ProductListComponent { // Injection moderne avec inject() private productService = inject(ProductService); products = this.productService.getProducts(); } ``` Les standalone components réduisent la complexité, améliorent le tree-shaking et simplifient le lazy loading. Cette approche est recommandée pour les nouveaux projets. ## Services et Injection de dépendances ### 6. Comment fonctionne l'injection de dépendances dans Angular ? L'injection de dépendances (DI) est un design pattern central dans Angular. Le framework gère la création et la fourniture des instances de services. ```typescript // user.service.ts import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, BehaviorSubject } from 'rxjs'; interface User { id: number; name: string; email: string; } // providedIn: 'root' = singleton au niveau application @Injectable({ providedIn: 'root' }) export class UserService { // Injection moderne avec inject() private http = inject(HttpClient); // État réactif partagé private currentUser$ = new BehaviorSubject(null); // API publique getUsers(): Observable { return this.http.get('/api/users'); } getUserById(id: number): Observable { return this.http.get(`/api/users/${id}`); } setCurrentUser(user: User): void { this.currentUser$.next(user); } getCurrentUser(): Observable { return this.currentUser$.asObservable(); } } // Utilisation dans un composant // user-profile.component.ts @Component({ selector: 'app-user-profile', standalone: true, template: ` @if (user$ | async; as user) {

} ` }) export class UserProfileComponent implements OnInit { // Injection via inject() (recommandé) private userService = inject(UserService); user$!: Observable; ngOnInit() { this.user$ = this.userService.getCurrentUser(); } } ``` Les différents niveaux de provision (`providedIn: 'root'`, au niveau module, ou au niveau composant) permettent de contrôler la portée et le cycle de vie des services. ### 7. Quelle est la différence entre providedIn root, any et platform ? Les options de `providedIn` contrôlent comment Angular crée et partage les instances de service. ```typescript // 1. providedIn: 'root' - Singleton au niveau application // Une seule instance partagée par toute l'application @Injectable({ providedIn: 'root' }) export class AuthService { private isAuthenticated = false; login() { this.isAuthenticated = true; } logout() { this.isAuthenticated = false; } isLoggedIn() { return this.isAuthenticated; } } // 2. providedIn: 'any' - Instance par module lazy-loaded // Chaque module lazy-loaded obtient sa propre instance @Injectable({ providedIn: 'any' }) export class FeatureLoggerService { private logs: string[] = []; log(message: string) { this.logs.push(`[${new Date().toISOString()}] ${message}`); } } // 3. providedIn: 'platform' - Partagé entre applications // Utile pour micro-frontends ou applications multi-apps @Injectable({ providedIn: 'platform' }) export class SharedConfigService { readonly apiUrl = 'https://api.example.com'; } // 4. Provision au niveau composant - Instance par composant @Component({ selector: 'app-editor', standalone: true, // Chaque instance du composant a sa propre instance du service providers: [EditorStateService], template: `...` }) export class EditorComponent { private editorState = inject(EditorStateService); } ``` Pour la plupart des cas, `providedIn: 'root'` est suffisant et optimal pour le tree-shaking. Avec `providedIn: 'root'`, Angular peut éliminer les services non utilisés du bundle final. Cela améliore les performances de chargement. ### 8. Comment utiliser les Observables avec RxJS dans Angular ? RxJS est la bibliothèque de programmation réactive utilisée par Angular pour gérer les flux de données asynchrones. ```typescript // search.service.ts import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, of, map, tap } from 'rxjs'; interface SearchResult { id: number; title: string; description: string; } @Injectable({ providedIn: 'root' }) export class SearchService { private http = inject(HttpClient); search(term: string): Observable { return this.http.get(`/api/search?q=${term}`); } } // search.component.ts @Component({ selector: 'app-search', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: ` @if (isLoading) {

Chargement...

}

{{ result.title }}

` }) export class SearchComponent implements OnInit, OnDestroy { private searchService = inject(SearchService); private destroy$ = new Subject(); searchControl = new FormControl(''); results$!: Observable; isLoading = false; ngOnInit() { this.results$ = this.searchControl.valueChanges.pipe( // Attendre 300ms après la dernière frappe debounceTime(300), // Ignorer si la valeur n'a pas changé distinctUntilChanged(), // Afficher le loading tap(() => this.isLoading = true), // Annuler la requête précédente et lancer la nouvelle switchMap(term => term ? this.searchService.search(term) : of([]) ), // Masquer le loading tap(() => this.isLoading = false), // Gérer les erreurs catchError(error => { console.error('Erreur de recherche:', error); this.isLoading = false; return of([]); }) ); } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } ``` Les opérateurs RxJS comme `debounceTime`, `distinctUntilChanged` et `switchMap` sont essentiels pour optimiser les recherches et éviter les requêtes inutiles. ## Angular moderne (16+) ### 9. Que sont les Signals dans Angular et comment les utiliser ? Les Signals (Angular 16+) introduisent une nouvelle primitive réactive plus simple et performante que les Observables pour l'état local. ```typescript // counter.component.ts import { Component, signal, computed, effect } from '@angular/core'; @Component({ selector: 'app-counter', standalone: true, template: `

Compteur: {{ count() }}

Double: {{ doubleCount() }}

Message: {{ message() }}

` }) export class CounterComponent { // Signal writable - valeur modifiable count = signal(0); // Signal computed - dérivé automatiquement // Recalculé uniquement quand count() change doubleCount = computed(() => this.count() * 2); // Computed avec logique conditionnelle message = computed(() => { const value = this.count(); if (value < 0) return 'Valeur négative'; if (value === 0) return 'Zéro'; if (value < 10) return 'Petit nombre'; return 'Grand nombre'; }); constructor() { // Effect - exécuté à chaque changement des signaux utilisés // Utile pour les side effects (logs, localStorage, etc.) effect(() => { console.log(`Nouvelle valeur: ${this.count()}`); localStorage.setItem('counter', String(this.count())); }); } increment() { // update() pour modifier basé sur la valeur précédente this.count.update(value => value + 1); } decrement() { this.count.update(value => value - 1); } reset() { // set() pour définir une valeur directement this.count.set(0); } } ``` Les Signals offrent une meilleure performance grâce à une détection de changement plus fine et une API plus intuitive que RxJS pour l'état local. ### 10. Comment fonctionnent les Signal Inputs et Outputs ? Angular 17+ introduit `input()` et `output()` comme alternatives signal-based aux décorateurs `@Input()` et `@Output()`. ```typescript // task-item.component.ts import { Component, input, output, computed } from '@angular/core'; interface Task { id: number; title: string; completed: boolean; priority: 'low' | 'medium' | 'high'; } @Component({ selector: 'app-task-item', standalone: true, template: `

{{ task().title }} {{ task().priority }} @if (showActions()) { }

` }) export class TaskItemComponent { // Input requis - doit être fourni par le parent task = input.required(); // Input optionnel avec valeur par défaut showActions = input(true); // Output basé sur les signaux toggle = output(); delete = output(); // Computed basé sur l'input priorityClass = computed(() => `priority-${this.task().priority}`); onToggle() { this.toggle.emit(this.task().id); } onDelete() { this.delete.emit(this.task().id); } } // Utilisation dans le parent // task-list.component.ts @Component({ selector: 'app-task-list', standalone: true, imports: [TaskItemComponent], template: ` @for (task of tasks(); track task.id) { } ` }) export class TaskListComponent { tasks = signal([ { id: 1, title: 'Apprendre Angular', completed: false, priority: 'high' }, { id: 2, title: 'Créer un projet', completed: false, priority: 'medium' } ]); canEdit = signal(true); onToggleTask(id: number) { this.tasks.update(tasks => tasks.map(t => t.id === id ? { ...t, completed: !t.completed } : t) ); } onDeleteTask(id: number) { this.tasks.update(tasks => tasks.filter(t => t.id !== id)); } } ``` Les signal inputs offrent un meilleur typage, une API plus cohérente avec les autres signaux, et préparent la transition vers la détection de changement zoneless. ### 11. Expliquez le nouveau Control Flow d'Angular 17+ Angular 17 introduit une nouvelle syntaxe de control flow intégrée au template, remplaçant les directives structurelles `*ngIf`, `*ngFor` et `*ngSwitch`. ```typescript // modern-control-flow.component.ts import { Component, signal } from '@angular/core'; interface User { id: number; name: string; role: 'admin' | 'user' | 'guest'; status: 'active' | 'inactive' | 'pending'; } @Component({ selector: 'app-modern-control-flow', standalone: true, template: ` @if (isLoading()) {

Chargement en cours...

} @else if (error()) {

} @else {

Utilisateurs ({{ users().length }})

@for (user of users(); track user.id; let i = $index, first = $first, last = $last) {

{{ i + 1 }}. {{ user.name }} @switch (user.role) { @case ('admin') { Administrateur } @case ('user') { Utilisateur } @default { Invité } }

} @empty {

Aucun utilisateur trouvé

}

} ` }) export class ModernControlFlowComponent { isLoading = signal(false); error = signal(null); users = signal([ { id: 1, name: 'Alice', role: 'admin', status: 'active' }, { id: 2, name: 'Bob', role: 'user', status: 'active' }, { id: 3, name: 'Charlie', role: 'guest', status: 'pending' } ]); } ``` La nouvelle syntaxe offre de meilleures performances grâce à une compilation optimisée, une meilleure lisibilité, et des fonctionnalités comme `@empty` pour `@for`. ### 12. Comment configurer le Lazy Loading avec les standalone components ? Le lazy loading charge les modules ou composants à la demande, réduisant le temps de chargement initial. ```typescript // app.routes.ts import { Routes } from '@angular/router'; export const routes: Routes = [ { path: '', // Composant chargé immédiatement loadComponent: () => import('./home/home.component') .then(m => m.HomeComponent) }, { path: 'products', // Lazy loading d'un composant standalone loadComponent: () => import('./products/product-list.component') .then(m => m.ProductListComponent) }, { path: 'admin', // Lazy loading de routes enfants loadChildren: () => import('./admin/admin.routes') .then(m => m.adminRoutes), // Guard pour l'authentification canActivate: [authGuard] }, { path: 'dashboard', loadComponent: () => import('./dashboard/dashboard.component') .then(m => m.DashboardComponent), // Routes enfants inline children: [ { path: 'stats', loadComponent: () => import('./dashboard/stats/stats.component') .then(m => m.StatsComponent) }, { path: 'settings', loadComponent: () => import('./dashboard/settings/settings.component') .then(m => m.SettingsComponent) } ] } ]; // admin/admin.routes.ts import { Routes } from '@angular/router'; export const adminRoutes: Routes = [ { path: '', loadComponent: () => import('./admin-layout.component') .then(m => m.AdminLayoutComponent), children: [ { path: 'users', loadComponent: () => import('./users/users.component') .then(m => m.UsersComponent) }, { path: 'reports', loadComponent: () => import('./reports/reports.component') .then(m => m.ReportsComponent) } ] } ]; // main.ts - Bootstrap avec routes import { bootstrapApplication } from '@angular/platform-browser'; import { provideRouter } from '@angular/router'; import { AppComponent } from './app/app.component'; import { routes } from './app/app.routes'; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes) ] }); ``` Avec les standalone components, le lazy loading est plus simple et plus granulaire qu'avec les NgModules. ## Formulaires Angular ### 13. Quelle est la différence entre Template-driven et Reactive Forms ? Angular propose deux approches pour gérer les formulaires, chacune adaptée à des cas d'usage différents. ```typescript // TEMPLATE-DRIVEN FORMS // Simple, déclaratif, adapté aux formulaires basiques // template-form.component.ts import { Component } from '@angular/core'; import { FormsModule, NgForm } from '@angular/forms'; @Component({ selector: 'app-template-form', standalone: true, imports: [FormsModule], template: ` ` }) export class TemplateFormComponent { user = { email: '', password: '' }; onSubmit(form: NgForm) { if (form.valid) { console.log('Form data:', this.user); } } } // REACTIVE FORMS // Plus de contrôle, testable, adapté aux formulaires complexes // reactive-form.component.ts import { Component, inject } from '@angular/core'; import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-reactive-form', standalone: true, imports: [ReactiveFormsModule], template: ` ` }) export class ReactiveFormComponent { private fb = inject(FormBuilder); // Définition programmatique du formulaire loginForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(8)]] }); onSubmit() { if (this.loginForm.valid) { console.log('Form data:', this.loginForm.value); } } } ``` Les Reactive Forms sont recommandés pour les formulaires complexes car ils offrent plus de flexibilité, sont plus faciles à tester, et permettent une meilleure réutilisation de la logique de validation. ### 14. Comment créer un validateur personnalisé ? Les validateurs personnalisés permettent d'implémenter des règles de validation métier spécifiques. ```typescript // validators/custom.validators.ts import { AbstractControl, ValidationErrors, ValidatorFn, AsyncValidatorFn } from '@angular/forms'; import { Observable, of, map, delay } from 'rxjs'; // Validateur synchrone - vérifie immédiatement export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const forbidden = forbiddenName.test(control.value); return forbidden ? { forbiddenName: { value: control.value } } : null; }; } // Validateur pour confirmer un mot de passe export function passwordMatchValidator(): ValidatorFn { return (group: AbstractControl): ValidationErrors | null => { const password = group.get('password')?.value; const confirmPassword = group.get('confirmPassword')?.value; return password === confirmPassword ? null : { passwordMismatch: true }; }; } // Validateur asynchrone - vérifie via API export function uniqueEmailValidator(userService: UserService): AsyncValidatorFn { return (control: AbstractControl): Observable => { if (!control.value) { return of(null); } return userService.checkEmailExists(control.value).pipe( map(exists => exists ? { emailTaken: true } : null) ); }; } // Utilisation dans un composant // registration.component.ts import { Component, inject } from '@angular/core'; import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; import { forbiddenNameValidator, passwordMatchValidator, uniqueEmailValidator } from './validators/custom.validators'; import { UserService } from './user.service'; @Component({ selector: 'app-registration', standalone: true, imports: [ReactiveFormsModule], template: ` ` }) export class RegistrationComponent { private fb = inject(FormBuilder); private userService = inject(UserService); registrationForm = this.fb.group({ username: ['', [ Validators.required, forbiddenNameValidator(/admin/i) ]], email: ['', [Validators.required, Validators.email], [uniqueEmailValidator(this.userService)] ], passwords: this.fb.group({ password: ['', [Validators.required, Validators.minLength(8)]], confirmPassword: ['', Validators.required] }, { validators: passwordMatchValidator() }) }); onSubmit() { if (this.registrationForm.valid) { console.log(this.registrationForm.value); } } } ``` Les validateurs asynchrones sont particulièrement utiles pour les vérifications côté serveur comme l'unicité d'un email ou d'un nom d'utilisateur. ## Routing et Navigation ### 15. Comment protéger les routes avec des Guards ? Les guards contrôlent l'accès aux routes en fonction de conditions comme l'authentification ou les permissions. ```typescript // guards/auth.guard.ts import { inject } from '@angular/core'; import { Router, CanActivateFn, CanMatchFn } from '@angular/router'; import { AuthService } from '../services/auth.service'; // Guard fonctionnel (recommandé depuis Angular 15+) export const authGuard: CanActivateFn = (route, state) => { const authService = inject(AuthService); const router = inject(Router); if (authService.isAuthenticated()) { return true; } // Rediriger vers la page de login avec l'URL de retour return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } }); }; // Guard pour les rôles export const roleGuard: CanActivateFn = (route, state) => { const authService = inject(AuthService); const router = inject(Router); const requiredRoles = route.data['roles'] as string[]; const userRole = authService.getUserRole(); if (requiredRoles.includes(userRole)) { return true; } return router.createUrlTree(['/unauthorized']); }; // Guard pour le lazy loading (canMatch) export const featureGuard: CanMatchFn = (route, segments) => { const featureService = inject(FeatureService); return featureService.isFeatureEnabled(route.path || ''); }; // Configuration des routes avec guards // app.routes.ts export const routes: Routes = [ { path: 'login', loadComponent: () => import('./login.component') }, { path: 'dashboard', loadComponent: () => import('./dashboard.component'), canActivate: [authGuard] }, { path: 'admin', loadChildren: () => import('./admin/admin.routes'), canActivate: [authGuard, roleGuard], canMatch: [featureGuard], data: { roles: ['admin', 'superadmin'] } }, { path: 'settings', loadComponent: () => import('./settings.component'), canActivate: [authGuard], // Guard pour quitter la page (données non sauvegardées) canDeactivate: [unsavedChangesGuard] } ]; // Guard pour les modifications non sauvegardées export const unsavedChangesGuard: CanDeactivateFn<{ hasUnsavedChanges: () => boolean }> = (component) => { if (component.hasUnsavedChanges()) { return confirm('Des modifications non sauvegardées seront perdues. Continuer ?'); } return true; }; ``` Les guards fonctionnels sont plus simples et s'intègrent mieux avec l'injection de dépendances moderne. ### 16. Comment passer des données entre routes ? Angular offre plusieurs méthodes pour transmettre des données lors de la navigation. ```typescript // 1. Route Parameters (dans l'URL) // app.routes.ts export const routes: Routes = [ { path: 'products/:id', loadComponent: () => import('./product-detail.component') } ]; // product-detail.component.ts import { Component, inject, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-product-detail', standalone: true, template: `

Produit {{ productId }}

` }) export class ProductDetailComponent implements OnInit { private route = inject(ActivatedRoute); productId!: string; ngOnInit() { // Accès aux paramètres de route this.productId = this.route.snapshot.paramMap.get('id')!; // Ou de manière réactive this.route.paramMap.subscribe(params => { this.productId = params.get('id')!; }); } } // 2. Query Parameters (?key=value) // navigation.component.ts import { Component, inject } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-navigation', standalone: true, template: ` ` }) export class NavigationComponent { private router = inject(Router); navigateWithQuery() { this.router.navigate(['/products'], { queryParams: { category: 'electronics', sort: 'price' } }); } } // 3. State (données non visibles dans l'URL) // order-confirmation.component.ts @Component({ selector: 'app-order-confirmation', standalone: true, template: ` @if (orderData) {

Commande #{{ orderData.orderId }} confirmée

} ` }) export class OrderConfirmationComponent implements OnInit { private route = inject(ActivatedRoute); orderData: any; ngOnInit() { // Récupérer le state passé via navigation this.orderData = history.state; } } // Naviguer avec state this.router.navigate(['/order-confirmation'], { state: { orderId: '12345', total: 99.99 } }); // 4. Resolvers (pré-chargement de données) // product.resolver.ts import { inject } from '@angular/core'; import { ResolveFn } from '@angular/router'; import { ProductService } from './product.service'; export const productResolver: ResolveFn = (route) => { const productService = inject(ProductService); const id = route.paramMap.get('id')!; return productService.getProduct(id); }; // Route avec resolver { path: 'products/:id', loadComponent: () => import('./product-detail.component'), resolve: { product: productResolver } } // Accès aux données résolues ngOnInit() { this.product = this.route.snapshot.data['product']; } ``` Les données passées via `state` sont perdues au rafraîchissement de la page. Pour les données persistantes, utiliser les paramètres d'URL ou stocker dans un service. ## Performance et optimisation ### 17. Comment fonctionne la détection de changement dans Angular ? Angular utilise Zone.js pour détecter les événements asynchrones et déclencher la vérification des composants. ```typescript // change-detection.component.ts import { Component, ChangeDetectionStrategy, ChangeDetectorRef, inject, signal } from '@angular/core'; // Stratégie par défaut : vérifie tout l'arbre de composants @Component({ selector: 'app-default-strategy', template: `

` }) export class DefaultStrategyComponent { data = 'Hello'; } // Stratégie OnPush : vérifie uniquement si les inputs changent // ou si un événement est déclenché dans le composant @Component({ selector: 'app-onpush-strategy', changeDetection: ChangeDetectionStrategy.OnPush, template: `

` }) export class OnPushStrategyComponent { private cdr = inject(ChangeDetectorRef); // Signal : déclenche automatiquement la détection data = signal({ name: 'Alice' }); update() { // Avec signal, la mise à jour est automatique this.data.set({ name: 'Bob' }); } // Pour les cas où la détection manuelle est nécessaire manualUpdate() { // Marquer le composant pour vérification this.cdr.markForCheck(); // Ou forcer une détection immédiate this.cdr.detectChanges(); } } // Exemple pratique : liste optimisée @Component({ selector: 'app-optimized-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` @for (item of items(); track item.id) {

} ` }) export class OptimizedListComponent { items = signal([]); addItem(item: Item) { // Créer un nouveau tableau pour déclencher la détection this.items.update(current => [...current, item]); } updateItem(id: number, changes: Partial) { this.items.update(current => current.map(item => item.id === id ? { ...item, ...changes } : item ) ); } } ``` La stratégie OnPush combinée aux Signals offre les meilleures performances en limitant les vérifications aux composants réellement modifiés. ### 18. Comment optimiser les performances d'une application Angular ? Plusieurs techniques permettent d'améliorer les performances d'une application Angular. ```typescript // 1. Lazy Loading des routes (voir question 12) // 2. TrackBy pour les listes (obligatoire avec @for) @Component({ template: ` @for (user of users(); track user.id) { } ` }) export class UserListComponent { users = signal([]); } // 3. Pipes purs pour les transformations // format-date.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'formatDate', standalone: true, pure: true // Par défaut, recalculé uniquement si l'input change }) export class FormatDatePipe implements PipeTransform { transform(value: Date, format: string = 'short'): string { return new Intl.DateTimeFormat('fr-FR', { dateStyle: format as any }).format(value); } } // 4. Virtual Scrolling pour les grandes listes import { Component } from '@angular/core'; import { ScrollingModule } from '@angular/cdk/scrolling'; @Component({ selector: 'app-virtual-list', standalone: true, imports: [ScrollingModule], template: `

`, styles: [` .viewport { height: 400px; } .item { height: 50px; } `] }) export class VirtualListComponent { items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })); } // 5. Defer pour le chargement différé (Angular 17+) @Component({ template: `

Toujours chargé immédiatement

@defer (on viewport) { } @placeholder {

Chargement...

} @loading (minimum 500ms) { } @defer (on interaction) { } @placeholder { } @defer (on timer(2000ms)) { } ` }) export class OptimizedPageComponent {} ``` La combinaison de ces techniques avec le profiling via Angular DevTools permet d'identifier et résoudre les goulots d'étranglement. ## Communication entre composants ### 19. Quelles sont les différentes méthodes de communication entre composants ? Angular offre plusieurs patterns pour la communication entre composants selon leur relation hiérarchique. ```typescript // 1. Parent → Enfant : @Input / input() // parent.component.ts @Component({ template: `` }) export class ParentComponent { parentMessage = 'Hello from parent'; } // child.component.ts @Component({ template: `

` }) export class ChildComponent { message = input.required(); } // 2. Enfant → Parent : @Output / output() // child.component.ts @Component({ template: `` }) export class ChildComponent { messageEvent = output(); sendMessage() { this.messageEvent.emit('Hello from child'); } } // parent.component.ts @Component({ template: `` }) export class ParentComponent { onMessage(message: string) { console.log(message); } } // 3. Via Service partagé (composants non liés) // message.service.ts @Injectable({ providedIn: 'root' }) export class MessageService { private messageSubject = new Subject(); message$ = this.messageSubject.asObservable(); // Ou avec Signal currentMessage = signal(''); sendMessage(message: string) { this.messageSubject.next(message); this.currentMessage.set(message); } } // component-a.ts @Component({ template: `` }) export class ComponentA { private messageService = inject(MessageService); send() { this.messageService.sendMessage('Hello from A'); } } // component-b.ts @Component({ template: `

` }) export class ComponentB implements OnDestroy { private messageService = inject(MessageService); private destroy$ = new Subject(); message$ = this.messageService.message$; ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } // 4. ViewChild pour accéder à un enfant @Component({ template: `` }) export class ParentComponent implements AfterViewInit { @ViewChild('timer') timerComponent!: TimerComponent; ngAfterViewInit() { this.timerComponent.start(); } } // 5. ContentChild pour le contenu projeté @Component({ selector: 'app-card', template: `

` }) export class CardComponent implements AfterContentInit { @ContentChild('header') header!: ElementRef; ngAfterContentInit() { console.log('Header content:', this.header); } } ``` Le choix de la méthode dépend de la relation entre les composants et de la complexité de la communication. ### 20. Comment implémenter un système de gestion d'état avec Signals ? Les Signals permettent de créer un store réactif simple sans bibliothèque externe. ```typescript // store/cart.store.ts import { Injectable, signal, computed } from '@angular/core'; interface CartItem { id: number; name: string; price: number; quantity: number; } interface CartState { items: CartItem[]; loading: boolean; error: string | null; } @Injectable({ providedIn: 'root' }) export class CartStore { // État privé private state = signal({ items: [], loading: false, error: null }); // Sélecteurs publics (lecture seule) readonly items = computed(() => this.state().items); readonly loading = computed(() => this.state().loading); readonly error = computed(() => this.state().error); readonly itemCount = computed(() => this.state().items.reduce((sum, item) => sum + item.quantity, 0) ); readonly total = computed(() => this.state().items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ) ); readonly isEmpty = computed(() => this.state().items.length === 0); // Actions addItem(product: Omit) { this.state.update(state => { const existingItem = state.items.find(i => i.id === product.id); if (existingItem) { return { ...state, items: state.items.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ) }; } return { ...state, items: [...state.items, { ...product, quantity: 1 }] }; }); } removeItem(id: number) { this.state.update(state => ({ ...state, items: state.items.filter(item => item.id !== id) })); } updateQuantity(id: number, quantity: number) { if (quantity <= 0) { this.removeItem(id); return; } this.state.update(state => ({ ...state, items: state.items.map(item => item.id === id ? { ...item, quantity } : item ) })); } clearCart() { this.state.update(state => ({ ...state, items: [] })); } // Action asynchrone async checkout() { this.state.update(s => ({ ...s, loading: true, error: null })); try { // Appel API await fetch('/api/checkout', { method: 'POST', body: JSON.stringify({ items: this.items() }) }); this.clearCart(); } catch (e) { this.state.update(s => ({ ...s, error: 'Erreur lors de la commande' })); } finally { this.state.update(s => ({ ...s, loading: false })); } } } // Utilisation dans un composant // cart.component.ts @Component({ selector: 'app-cart', standalone: true, template: ` @if (cartStore.isEmpty()) {

Votre panier est vide

} @else { @for (item of cartStore.items(); track item.id) {

{{ item.name }} {{ item.price }} € × {{ item.quantity }}

}

Total: {{ cartStore.total() }} € ({{ cartStore.itemCount() }} articles)

} ` }) export class CartComponent { cartStore = inject(CartStore); } ``` Ce pattern offre une gestion d'état prévisible et réactive sans la complexité de NgRx pour les applications de taille moyenne. ## Testing Angular ### 21. Comment tester un composant Angular ? Les tests de composants vérifient le rendu, les interactions et l'intégration avec les services. ```typescript // user-card.component.spec.ts import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { UserCardComponent } from './user-card.component'; describe('UserCardComponent', () => { let component: UserCardComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [UserCardComponent] }).compileComponents(); fixture = TestBed.createComponent(UserCardComponent); component = fixture.componentInstance; }); it('should create', () => { expect(component).toBeTruthy(); }); it('should display user name', () => { // Arrange fixture.componentRef.setInput('user', { name: 'Alice', email: 'alice@test.com' }); // Act fixture.detectChanges(); // Assert const nameElement = fixture.debugElement.query(By.css('.user-name')); expect(nameElement.nativeElement.textContent).toContain('Alice'); }); it('should emit event when delete button clicked', () => { // Arrange fixture.componentRef.setInput('user', { id: 1, name: 'Alice' }); fixture.detectChanges(); const deleteSpy = jest.spyOn(component.delete, 'emit'); // Act const deleteButton = fixture.debugElement.query(By.css('.delete-btn')); deleteButton.triggerEventHandler('click', null); // Assert expect(deleteSpy).toHaveBeenCalledWith(1); }); it('should show loading state', () => { // Arrange fixture.componentRef.setInput('isLoading', true); // Act fixture.detectChanges(); // Assert const spinner = fixture.debugElement.query(By.css('.spinner')); expect(spinner).toBeTruthy(); }); }); // Test avec service mocké // user-list.component.spec.ts import { of, throwError } from 'rxjs'; describe('UserListComponent', () => { let component: UserListComponent; let fixture: ComponentFixture; let mockUserService: jest.Mocked; beforeEach(async () => { mockUserService = { getUsers: jest.fn(), deleteUser: jest.fn() } as any; await TestBed.configureTestingModule({ imports: [UserListComponent], providers: [ { provide: UserService, useValue: mockUserService } ] }).compileComponents(); fixture = TestBed.createComponent(UserListComponent); component = fixture.componentInstance; }); it('should load users on init', () => { // Arrange const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]; mockUserService.getUsers.mockReturnValue(of(users)); // Act fixture.detectChanges(); // Assert expect(mockUserService.getUsers).toHaveBeenCalled(); expect(component.users()).toEqual(users); }); it('should handle error state', () => { // Arrange mockUserService.getUsers.mockReturnValue( throwError(() => new Error('Network error')) ); // Act fixture.detectChanges(); // Assert expect(component.error()).toBe('Erreur de chargement'); }); }); ``` ### 22. Comment tester un service Angular ? Les tests de services vérifient la logique métier et les interactions avec les APIs. ```typescript // auth.service.spec.ts import { TestBed } from '@angular/core/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; import { AuthService } from './auth.service'; describe('AuthService', () => { let service: AuthService; let httpMock: HttpTestingController; beforeEach(() => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [AuthService] }); service = TestBed.inject(AuthService); httpMock = TestBed.inject(HttpTestingController); }); afterEach(() => { // Vérifier qu'il n'y a pas de requêtes en attente httpMock.verify(); }); describe('login', () => { it('should return user on successful login', () => { // Arrange const credentials = { email: 'test@test.com', password: 'password' }; const mockResponse = { id: 1, email: 'test@test.com', token: 'abc123' }; // Act service.login(credentials).subscribe(user => { // Assert expect(user).toEqual(mockResponse); expect(service.isAuthenticated()).toBe(true); }); // Simuler la réponse HTTP const req = httpMock.expectOne('/api/auth/login'); expect(req.request.method).toBe('POST'); expect(req.request.body).toEqual(credentials); req.flush(mockResponse); }); it('should handle login error', () => { // Arrange const credentials = { email: 'test@test.com', password: 'wrong' }; // Act service.login(credentials).subscribe({ error: (error) => { // Assert expect(error.status).toBe(401); expect(service.isAuthenticated()).toBe(false); } }); // Simuler une erreur const req = httpMock.expectOne('/api/auth/login'); req.flush({ message: 'Invalid credentials' }, { status: 401, statusText: 'Unauthorized' }); }); }); describe('logout', () => { it('should clear authentication state', () => { // Arrange - simuler un utilisateur connecté service['currentUser'].set({ id: 1, email: 'test@test.com' }); // Act service.logout(); // Assert expect(service.isAuthenticated()).toBe(false); expect(service.getCurrentUser()).toBeNull(); }); }); }); ``` ## Questions avancées ### 23. Comment fonctionne le Server-Side Rendering (SSR) avec Angular ? Angular Universal permet le rendu côté serveur pour améliorer le SEO et les performances perçues. ```typescript // Configuration SSR avec Angular 17+ // app.config.server.ts import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'; import { provideServerRendering } from '@angular/platform-server'; import { appConfig } from './app.config'; const serverConfig: ApplicationConfig = { providers: [ provideServerRendering() ] }; export const config = mergeApplicationConfig(appConfig, serverConfig); // Gestion des APIs browser uniquement // platform.service.ts import { Injectable, PLATFORM_ID, inject } from '@angular/core'; import { isPlatformBrowser, isPlatformServer } from '@angular/common'; @Injectable({ providedIn: 'root' }) export class PlatformService { private platformId = inject(PLATFORM_ID); get isBrowser(): boolean { return isPlatformBrowser(this.platformId); } get isServer(): boolean { return isPlatformServer(this.platformId); } } // Composant SSR-aware // analytics.component.ts @Component({ selector: 'app-analytics', standalone: true, template: ` @if (platform.isBrowser) {

} ` }) export class AnalyticsComponent implements OnInit { platform = inject(PlatformService); ngOnInit() { // Code exécuté uniquement côté client if (this.platform.isBrowser) { this.initializeAnalytics(); } } private initializeAnalytics() { // window et document sont disponibles console.log('Analytics initialized on', window.location.href); } } // TransferState pour éviter les doubles requêtes // product.service.ts import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { TransferState, makeStateKey } from '@angular/core'; import { of, tap } from 'rxjs'; const PRODUCTS_KEY = makeStateKey('products'); @Injectable({ providedIn: 'root' }) export class ProductService { private http = inject(HttpClient); private transferState = inject(TransferState); private platform = inject(PlatformService); getProducts() { // Côté client : vérifier si les données existent déjà if (this.platform.isBrowser) { const cachedProducts = this.transferState.get(PRODUCTS_KEY, null); if (cachedProducts) { this.transferState.remove(PRODUCTS_KEY); return of(cachedProducts); } } return this.http.get('/api/products').pipe( tap(products => { // Côté serveur : stocker pour le client if (this.platform.isServer) { this.transferState.set(PRODUCTS_KEY, products); } }) ); } } ``` Le SSR améliore le First Contentful Paint et permet aux moteurs de recherche d'indexer le contenu dynamique. ### 24. Comment gérer l'internationalisation (i18n) dans Angular ? Angular propose plusieurs approches pour l'internationalisation des applications. ```typescript // 1. Angular i18n intégré (compilation séparée par langue) // app.component.ts @Component({ template: `

Bienvenue sur notre application

{itemCount, plural, =0 {Aucun article} =1 {Un article} other {{{itemCount}} articles} }

` }) export class AppComponent { itemCount = 5; } // 2. ngx-translate (changement de langue à runtime) // app.config.ts import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } // Configuration provideTranslateService({ defaultLanguage: 'fr', loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) // language-switcher.component.ts @Component({ selector: 'app-language-switcher', standalone: true, imports: [TranslateModule], template: `

{{ 'HOME.WELCOME' | translate:{ name: userName } }}

` }) export class LanguageSwitcherComponent { private translate = inject(TranslateService); userName = 'Alice'; changeLanguage(event: Event) { const lang = (event.target as HTMLSelectElement).value; this.translate.use(lang); } } // assets/i18n/fr.json { "HOME": { "TITLE": "Bienvenue", "WELCOME": "Bonjour {{name}} !" } } // assets/i18n/en.json { "HOME": { "TITLE": "Welcome", "WELCOME": "Hello {{name}}!" } } ``` Le choix entre i18n intégré et ngx-translate dépend des besoins : compilation séparée pour les meilleures performances, ou changement dynamique pour plus de flexibilité. ### 25. Quelles sont les bonnes pratiques de structuration d'un projet Angular ? Une structure bien organisée facilite la maintenance et la scalabilité du projet. ``` src/ ├── app/ │ ├── core/ # Services singleton, guards, interceptors │ │ ├── guards/ │ │ │ └── auth.guard.ts │ │ ├── interceptors/ │ │ │ └── auth.interceptor.ts │ │ ├── services/ │ │ │ ├── auth.service.ts │ │ │ └── api.service.ts │ │ └── core.provider.ts # Configuration des providers │ │ │ ├── shared/ # Composants, pipes, directives réutilisables │ │ ├── components/ │ │ │ ├── button/ │ │ │ └── modal/ │ │ ├── directives/ │ │ ├── pipes/ │ │ └── index.ts # Barrel exports │ │ │ ├── features/ # Modules fonctionnels (lazy-loaded) │ │ ├── products/ │ │ │ ├── components/ │ │ │ ├── services/ │ │ │ ├── models/ │ │ │ ├── products.routes.ts │ │ │ └── products.component.ts │ │ ├── cart/ │ │ └── checkout/ │ │ │ ├── layouts/ # Layouts de page │ │ ├── main-layout/ │ │ └── auth-layout/ │ │ │ ├── app.component.ts │ ├── app.config.ts │ └── app.routes.ts │ ├── assets/ ├── environments/ └── styles/ ``` ```typescript // Bonnes pratiques de code // 1. Barrel exports pour simplifier les imports // shared/index.ts export * from './components/button/button.component'; export * from './components/modal/modal.component'; export * from './pipes/format-date.pipe'; // 2. Configuration centralisée des providers // core/core.provider.ts import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { authInterceptor } from './interceptors/auth.interceptor'; export const coreProviders = [ provideHttpClient( withInterceptors([authInterceptor]) ), // Autres providers globaux ]; // 3. Modèles typés // features/products/models/product.model.ts export interface Product { id: number; name: string; price: number; category: ProductCategory; createdAt: Date; } export type ProductCategory = 'electronics' | 'clothing' | 'books'; export interface CreateProductDto { name: string; price: number; category: ProductCategory; } // 4. Interceptor fonctionnel // core/interceptors/auth.interceptor.ts import { HttpInterceptorFn } from '@angular/common/http'; import { inject } from '@angular/core'; export const authInterceptor: HttpInterceptorFn = (req, next) => { const authService = inject(AuthService); const token = authService.getToken(); if (token) { req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); } return next(req); }; ``` Ces conventions permettent une navigation intuitive dans le code et facilitent le travail en équipe. ## Conclusion Ces 25 questions couvrent les concepts essentiels d'Angular demandés en entretien. Les points clés à maîtriser : - ✅ **Fondamentaux** : Composants, data binding, cycle de vie, DI - ✅ **Angular moderne** : Signals, standalone components, nouveau control flow - ✅ **Réactivité** : RxJS, Observables, gestion d'état avec Signals - ✅ **Formulaires** : Template-driven vs Reactive, validation personnalisée - ✅ **Routing** : Guards, lazy loading, passage de données - ✅ **Performance** : OnPush, defer, virtual scrolling - ✅ **Testing** : Tests unitaires, mocks, HttpTestingController La préparation aux entretiens Angular nécessite une pratique régulière. Construire des projets personnels permet de consolider ces connaissances et de pouvoir les expliquer naturellement lors de l'entretien.

{{ user.name }}

{{ product.name }}