Component Lifecycle

Question 1

What are key ideas behind Angular

Answer 1

Components, Templates, Directives, and Dependency Injection

Question 2

What is a Lifecycle Hook

Answer 2

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.

Question 3

What are the Lifecycle Hooks

Answer 3

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.

Question 4

What is an NgModule

Answer 4

Ng Modules collect related code into functional sets; an Angular app is defined by a set of NgModules.

Question 5

What is a “view”

Answer 5

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

Question 6

What is a “service”

Answer 6

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.

Question 7

ngOnChanges()

Answer 7

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.

Question 8

ngOnInit()

Answer 8

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.

Question 9

ngDoCheck()

Answer 9

A lifecycle hook

Detect and act upon changes that Angular can’t or won’t detect on its own.

Question 10

ngAfterContentInit()

Answer 10

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.

Question 11

ngAfterContentChecked()

Answer 11

A lifecycle hook
Component Only
Respond after Angular checks the content projected into the directive or component.

Question 12

ngAfterViewInit()

Answer 12

A lifecycle hook
Component Only
Respond after Angular initializes the component’s views and child views, or the view that contains the directive.

Question 13

ngAfterViewChecked()

Answer 13

A lifecycle hook
Component Only
Respond after Angular checks the component’s views and child views, or the view that contains the directive.

Question 14

ngOnDestroy()

Answer 14

A lifecycle hook
Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Question 15

When to use ngOnInit()

Answer 15

• 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.

Question 16

How to use ngOnDestroy()

Answer 16

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.