20 QA – Angular

---

1. Quelle est la différence entre ngOnInit et le constructeur ?

Réponse :
Le constructeur sert à l’initialisation de base et à l’injection de dépendances.
ngOnInit est un hook du cycle de vie appelé après l’initialisation des inputs, idéal pour appeler des services ou initialiser des données.

---

2. Expliquez le fonctionnement du Change Detection d’Angular.

Réponse :
Angular utilise une stratégie de détection basée sur Zone.js.
Par défaut (Default), chaque événement déclenche une vérification complète.
Avec OnPush, la détection se fait uniquement si :

• une @Input() change

• un Observable émet

• un événement utilisateur se produit

---

3. Quelle est la différence entre Subject, BehaviorSubject et ReplaySubject ?

Réponse :

• Subject : pas de valeur initiale

• BehaviorSubject : valeur initiale + dernière valeur disponible

• ReplaySubject : rejoue n valeurs passées aux nouveaux abonnés

---

4. À quoi sert un Resolver Angular ?

Réponse :
Il permet de charger des données avant la navigation vers une route, garantissant que le composant reçoit les données dès son affichage.

---

5. Expliquez la différence entre ng-content, ng-template et ng-container.

Réponse :

• ng-content : projection de contenu

• ng-template : template différé

• ng-container : regroupement logique sans balise HTML

---

6. Comment optimiser les performances dans une application Angular ?

Réponse :

• ChangeDetectionStrategy.OnPush

• Lazy loading des modules

• trackBy dans *ngFor

• async pipe

• Éviter les fonctions dans le template

---

7. Qu’est-ce que le Lazy Loading et comment l’implémenter ?

Réponse :
Chargement des modules à la demande via le Router :

loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)

---

8. Quelle est la différence entre Promise et Observable ?

Réponse :

• Promise : une seule valeur, non annulable

• Observable : flux de données, annulable, multiple émissions

---

9. Comment gérer les erreurs HTTP globalement ?

Réponse :
Avec un HttpInterceptor :

• interception des réponses

• gestion centralisée des erreurs (401, 403, 500…)

---

10. Expliquez le rôle des HttpInterceptors.

Réponse :
Ils permettent de modifier les requêtes/réponses HTTP :

• ajouter un token JWT

• gérer les erreurs

• afficher un loader global

---

11. Différence entre Reactive Forms et Template-driven Forms ?

Réponse :

• Reactive Forms : logique côté TypeScript, testables, scalables

• Template-driven : simples, logique dans le HTML

---

12. Comment partager des données entre composants ?

Réponse :

• Parent → enfant : @Input

• Enfant → parent : @Output

• Frères : service partagé + Observable

• Global : state management (NgRx)

---

13. Qu’est-ce que NgRx et quand l’utiliser ?

Réponse :
NgRx est une librairie de gestion d’état inspirée de Redux.
À utiliser pour des applications complexes avec état global, forte interaction entre composants.

---

14. Expliquez le concept de pure pipe.

Réponse :
Une pipe pure est recalculée uniquement si ses entrées changent, ce qui améliore les performances.

---

15. Comment sécuriser une application Angular ?

Réponse :

• Guards (AuthGuard)

• JWT + Interceptors

• Sanitization XSS

• Désactivation du debug en production

---

16. Différence entre ViewChild et ContentChild ?

Réponse :

• ViewChild : éléments du template du composant

• ContentChild : contenu projeté via ng-content

---

17. À quoi sert trackBy dans *ngFor ?

Réponse :
Il optimise le rendu en identifiant chaque élément par une clé unique, évitant les re-render inutiles.

---

18. Expliquez le cycle de vie d’un composant Angular.

Réponse :
ngOnChanges → ngOnInit → ngDoCheck → ngAfterViewInit → ngOnDestroy

---

19. Comment gérer les subscriptions pour éviter les memory leaks ?

Réponse :

• async pipe

• takeUntil

• unsubscribe() dans ngOnDestroy

---

20. Quelle est la différence entre un Module et un Standalone Component ?

Réponse :

• Module : structure classique Angular

• Standalone Component : plus léger, sans NgModule, recommandé depuis Angular 14+

---