Lifecycle hook in Angular

Tram Ho

Hello everyone, if you have ever worked with React or Vue, it all has a lifecycle hook, then Angular is no exception, this article I would like to introduce the lifecycle hook in Angular, looking forward to everyone. follow

1) Lifecycle Hook in angular

  • Are the methods of Directive and Component such as Create, Change, Destroy.
  • Each hook will belong to an interface. For example: ngOnInit belongs to OnInit

1.1) Contructor :

  • Called before all lifecycle hooks, usually used to find Dependency Injection like Services .
  • Note that the constructor is not a hook method

1.2) ngOnInit :

  • Initialize the directive / component after the first display and set the directive / component’s inputs
  • Called only once, after the ngOnChanges () hook is called for the first time
  • Used to initialize values

For example :

  • I will create a new project and at the same time I will create a component named LifecycleHookComponent

File lifecycle-hook.component.ts

In this file I have imported and called hook ngOnInit() and inside, I have cosole.log out to see

App.component.html file

Next, I will call this component in the app file to run

After running the program, I will get the results

1.2) ngOnDestroy :

  • Called when component is destroyed, used to cancel connections, free up memory
  • For example, components connecting Api, database, route -> should be canceled to free up memory

For example

File lifecycle-hook.component.ts

In this file, I will call the ngOnDestroy hook and I will log out to see the results

App.component.html file

App.component.ts file

In the above example, I will add a button so that when clicking on this button will open and close the lifecycle-hook component and after each opening and closing, I get the results.

1.3) ngOnChanges :

  • The ngOnChanges method is called when the component detects that a value is bound to the component using the Input properties method.
  • Managed through objects SimpleChanges, called before ngOnInit
    • Gives us an object of type SimpleChanges
    • SimpleChanges : belongs to @angular/core
    • Used to handle when @Input has a change
      • currentValue: Current value
      • previousValue: previous value
      • firstChange (): change the first time? true: false

For example

To check ngOnChanges , in this example I have created 2 input boxes and 1 button so I will calculate the sum of the two input cells above then I will pass the data to the lifecycle-hook component.

App.component.html file

App.component.ts file

File lifecycle-hook.component.ts

Results received

Each time we receive a value from the parent component passed to the ngOnChanges function will be called and we have to log more parameters of the ngOnChanges function

1.4) ngDoCheck :

  • ngDoCheck activates with every change detection cycle. Angular runs regular change detection. Performing any action will make it spin. ngDoCheck enabled with these cycles. When using it we should be cautious as it can create performance problems when implemented incorrectly.
  • ngDoCheck allows us to check data manually
  • Called after ngOnChanges and ngOnInit, every call by ngOnChange => will be called

1.5) ngAfterContentInit

  • ngAfterContentInit fires after initializing the component’s content DOM (first loads). Waiting on ContentChild queries is the hook’s main use case.
  • ContentChild queries the element references that bring the content DOM. As a result, they will not be available until after the content DOM loads. Hence why ngAfterContentInit and its counterpart ngAfterContentChecked are used.
  • Using ng-content to check – Using ContentChild (ElementRef Type)
  • Only played 1 time only

1.6) ngAfterContentChecked

  • ngAfterContentChecked fires after each change detection cycle targets DOM content. This allows developers to support how content DOM responds to change detection.
  • ngAfterContentChecked can trigger frequently and cause performance problems if implemented poorly.
  • ngAfterContentChecked is also activated during a component’s initialization phase. It appears right after ngAfterContentInit.
  • Called many times
  • Only for components

1.7) ngAfterView :

  • Called after Angular initializes the component views and child views
  • The view always loads right after the content. ngAfterViewInit waits for ViewChild (ren) queries to resolve. These elements are queried from within the same view of the component.
  • It is the current view
  • Processing Template + Template Reference Variables
  • Use ViewChild
  • Note that when using template ref (# variable name) also use ViewChild
  • For example: <my-content #abc />

1.8) ngAfterViewChecked

  • ngAfterViewChecked fires after any change detection cycle targeting the component’s view
  • ngAfterViewChecked allows developers to facilitate detection of how changes affect the view DOM.

Conclude

Above is some of the knowledge I learned about the lifecycle hook in angular, Thank you for watching.

reference source

Share the news now

Source : Viblo