Component Lifecycle Flashcards
(16 cards)
What are key ideas behind Angular
Components, Templates, Directives, and Dependency Injection
What is a Lifecycle Hook
An interface that allows you to tap into the lifecycle of directives and components as they are created, updated, and destroyed.
Each interface has a single hook method whose name is the interface name prefixed with ng.
What are the Lifecycle Hooks
ngOnChanges: When an input/output binding value changes.
ngOnInit: After the first ngOnChanges.
ngDoCheck: Developer’s custom change detection.
ngAfterContentInit: After component content initialized.
ngAfterContentChecked: After every check of component content.
ngAfterViewInit: After a component’s views are initialized.
ngAfterViewChecked: After every check of a component’s views.
ngOnDestroy: Just before the directive is destroyed.
What is an NgModule
Ng Modules collect related code into functional sets; an Angular app is defined by a set of NgModules.
What is a “view”
Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
What is a “service”
Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.
ngOnChanges()
A lifecycle hook
Respond when Angular sets or resets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.
Note that this happens very frequently, so any operation you perform here impacts performance significantly.
ngOnInit()
A lifecycle hook
Initialize the directive or component after Angular first displays the data-bound properties and sets the directive or component’s input properties.
ngDoCheck()
A lifecycle hook
Detect and act upon changes that Angular can’t or won’t detect on its own.
ngAfterContentInit()
A lifecycle hook
Component Only
Respond after Angular projects external content into the component’s view, or into the view that a directive is in.
ngAfterContentChecked()
A lifecycle hook
Component Only
Respond after Angular checks the content projected into the directive or component.
ngAfterViewInit()
A lifecycle hook
Component Only
Respond after Angular initializes the component’s views and child views, or the view that contains the directive.
ngAfterViewChecked()
A lifecycle hook
Component Only
Respond after Angular checks the component’s views and child views, or the view that contains the directive.
ngOnDestroy()
A lifecycle hook
Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
When to use ngOnInit()
- Perform complex initializations outside of the constructor. Components should be cheap and safe to construct.
You should not, for example, fetch data in a component constructor. - Set up the component after Angular sets the input properties.
Constructors should do no more than set the initial local variables to simple values.
How to use ngOnDestroy()
Put cleanup logic in ngOnDestroy(), the logic that must run before Angular destroys the directive.
This is the place to free resources that won’t be garbage-collected automatically. You risk memory leaks if you neglect to do so.
- Unsubscribe from Observables and DOM events.
- Stop interval timers.
- Unregister all callbacks that the directive registered with global or application services.
Calling this method is also the time to notify another part of the app that this component is going away.
