# Composants et cycle de vie (Angular)

> Component lifecycle hooks, ngOnInit, ngOnChanges, ngOnDestroy, ngAfterViewInit, component communication, @Input, @Output

- 20 questions d'entretien
- Junior
- [Questions d'entretien: Angular](https://sharpskill.dev/fr/technologies/angular/questions-entretien.md)

## 1. Qu'est-ce qu'un lifecycle hook dans Angular ?

**Réponse**

Un lifecycle hook est une méthode spéciale appelée automatiquement par Angular à des moments clés du cycle de vie d'un component ou d'une directive. Ces hooks permettent d'exécuter du code à des étapes précises comme la création, la mise à jour ou la destruction. Les hooks les plus courants sont ngOnInit, ngOnChanges et ngOnDestroy.

## 2. À quel moment ngOnInit est-il appelé ?

**Réponse**

ngOnInit est appelé une seule fois après le premier ngOnChanges, une fois que toutes les propriétés @Input ont été initialisées. C'est le hook idéal pour initialiser les données du component, démarrer des subscriptions ou appeler des services. Il est préférable à constructor pour la logique d'initialisation car toutes les bindings sont garantis disponibles.

## 3. Quelle est la différence principale entre ngOnChanges et ngOnInit ?

**Réponse**

ngOnChanges est appelé à chaque fois qu'une propriété @Input change de valeur et reçoit un objet SimpleChanges contenant les anciennes et nouvelles valeurs. ngOnInit est appelé une seule fois après la première initialisation. Utiliser ngOnChanges pour réagir aux changements d'inputs et implémenter une logique dépendante des valeurs @Input. Privilégier ngOnInit pour l'initialisation unique comme les appels API ou la configuration initiale.

## 17 questions supplémentaires disponibles

- Pourquoi utiliser ngOnDestroy dans un component ?
- Dans quel ordre sont appelés les lifecycle hooks lors de la création d'un component ?

S'inscrire gratuitement: https://sharpskill.dev/fr/login

## Autres sujets d'entretien Angular

- [Les bases de TypeScript](https://sharpskill.dev/fr/technologies/angular/questions-entretien/typescript-basics.md): 25 questions, Junior
- [TypeScript avancé](https://sharpskill.dev/fr/technologies/angular/questions-entretien/typescript-advanced.md): 20 questions, Junior
- [Fondamentaux Angular](https://sharpskill.dev/fr/technologies/angular/questions-entretien/angular-fundamentals.md): 20 questions, Junior
- [Services et Dependency Injection](https://sharpskill.dev/fr/technologies/angular/questions-entretien/services-dependency-injection.md): 20 questions, Junior
- [Organisation des Modules Angular](https://sharpskill.dev/fr/technologies/angular/questions-entretien/modules-organization.md): 22 questions, Confirmé
- [Angular CLI](https://sharpskill.dev/fr/technologies/angular/questions-entretien/angular-cli.md): 18 questions, Junior
- [Directives et Pipes](https://sharpskill.dev/fr/technologies/angular/questions-entretien/directives-pipes.md): 22 questions, Confirmé
- [Routing et Navigation](https://sharpskill.dev/fr/technologies/angular/questions-entretien/routing-navigation.md): 24 questions, Confirmé
- [Formulaires réactifs](https://sharpskill.dev/fr/technologies/angular/questions-entretien/forms-reactive.md): 26 questions, Confirmé
- [Formulaires template-driven](https://sharpskill.dev/fr/technologies/angular/questions-entretien/forms-template-driven.md): 16 questions, Confirmé
- [Fondamentaux RxJS](https://sharpskill.dev/fr/technologies/angular/questions-entretien/rxjs-fundamentals.md): 22 questions, Confirmé
- [Opérateurs RxJS](https://sharpskill.dev/fr/technologies/angular/questions-entretien/rxjs-operators.md): 24 questions, Confirmé
- [HttpClient et API calls](https://sharpskill.dev/fr/technologies/angular/questions-entretien/http-client.md): 22 questions, Confirmé
- [Gestion d'état de base](https://sharpskill.dev/fr/technologies/angular/questions-entretien/state-management-basics.md): 20 questions, Confirmé
- [Change Detection](https://sharpskill.dev/fr/technologies/angular/questions-entretien/change-detection.md): 20 questions, Confirmé
- [Angular Signals](https://sharpskill.dev/fr/technologies/angular/questions-entretien/angular-signals.md): 20 questions, Confirmé
- [Standalone Components](https://sharpskill.dev/fr/technologies/angular/questions-entretien/standalone-components.md): 18 questions, Confirmé
- [Tests unitaires Angular](https://sharpskill.dev/fr/technologies/angular/questions-entretien/testing-unit.md): 22 questions, Confirmé
- [Tests end-to-end](https://sharpskill.dev/fr/technologies/angular/questions-entretien/testing-e2e.md): 18 questions, Confirmé
- [Build et optimisation](https://sharpskill.dev/fr/technologies/angular/questions-entretien/build-optimization.md): 20 questions, Confirmé
- [Fondamentaux NgRx](https://sharpskill.dev/fr/technologies/angular/questions-entretien/ngrx-fundamentals.md): 24 questions, Senior
- [NgRx avancé](https://sharpskill.dev/fr/technologies/angular/questions-entretien/ngrx-advanced.md): 24 questions, Senior
- [Architecture Angular](https://sharpskill.dev/fr/technologies/angular/questions-entretien/angular-architecture.md): 22 questions, Senior
- [Optimisation de performance](https://sharpskill.dev/fr/technologies/angular/questions-entretien/performance-optimization.md): 22 questions, Senior
- [Sécurité et bonnes pratiques](https://sharpskill.dev/fr/technologies/angular/questions-entretien/security-best-practices.md): 20 questions, Senior
- [Patterns RxJS avancés](https://sharpskill.dev/fr/technologies/angular/questions-entretien/advanced-rxjs-patterns.md): 22 questions, Senior
- [Angular Universal et SSR](https://sharpskill.dev/fr/technologies/angular/questions-entretien/angular-universal-ssr.md): 20 questions, Senior
- [Micro-frontends Angular](https://sharpskill.dev/fr/technologies/angular/questions-entretien/micro-frontends-angular.md): 20 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/fr/technologies/angular/questions-entretien/components-lifecycle