Angular

 

---

🔄 Cycle de vie d’un composant Angular

Les principales étapes :

1. constructor
2. ngOnChanges
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

---

❓ Quelle est la 1ère méthode appelée ?

👉 Le constructor est appelé en premier, mais ce n’est pas une méthode du cycle de vie Angular.

👉 La première vraie méthode Angular est :

ngOnChanges()

(si le composant reçoit des @Input)

Sinon :

ngOnInit()

---

❓ Le constructor, quand est-il appelé ?

👉 Il est appelé :

• lors de l’instanciation du composant
• avant tout hook Angular

👉 Utilisation :

• injection de dépendances (services)

❌ À éviter dans le constructor :

• appels HTTP
• logique métier

✔️ Préférer :

ngOnInit()

---

🔗 Communication entre composants

🔽 Parent → Enfant

👉 avec @Input()

@Input() data: string;

---

🔼 Enfant → Parent

👉 avec @Output() + EventEmitter

@Output() notify = new EventEmitter<string>();

this.notify.emit("hello");

---

🔁 Autres méthodes

• service partagé (singleton)
• state management (NgRx, etc.)

---

📡 Observable en Angular

👉 Angular utilise les Observables de RxJS

Définition

Un Observable est :

• un flux de données dans le temps
• asynchrone
• pouvant émettre plusieurs valeurs

Exemple

this.http.get('/api/data').subscribe(data => {
  console.log(data);
});

---

🔀 Types de Subject

Dans RxJS :

1. Subject

• pas de valeur initiale
• multicast

2. BehaviorSubject

• a une valeur initiale
• renvoie la dernière valeur aux nouveaux abonnés

3. ReplaySubject

• rejoue plusieurs valeurs passées

4. AsyncSubject

• émet uniquement la dernière valeur à la complétion

---

🔐 Ajouter un token à toutes les requêtes HTTP

👉 Utiliser un HTTP Interceptor

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const cloned = req.clone({
      headers: req.headers.set('Authorization', 'Bearer TOKEN')
    });

    return next.handle(cloned);
  }
}

Puis l’enregistrer :

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

👉 ✔️ Permet de ne pas modifier chaque requête

---

🔄 Promise vs Observable

Promise

👉 Une seule valeur, une seule fois

fetch('/api').then(res => res.json());

Caractéristiques :

• eager (s’exécute immédiatement)
• non annulable
• simple

---

Observable

👉 Plusieurs valeurs dans le temps

observable.subscribe()

Caractéristiques :

• lazy (s’exécute au subscribe)
• annulable (unsubscribe)
• operators puissants (map, filter, etc.)

---

⚖️ Différence clé

Feature	Promise	Observable
Valeurs	1	multiple
Annulation	❌	✅
Lazy	❌	✅
Operators	❌	✅

---

✅ Résumé rapide (version entretien)

• constructor → instanciation (DI uniquement)
• ngOnInit → init logique
• @Input / @Output → communication
• Observable → flux async (RxJS)
• Subject → variantes (Behavior, Replay…)
• Interceptor → injecter token global
• Promise vs Observable → 1 valeur vs flux