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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">,</span> OnInit <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> <span class="token comment">// import OnInit từ angular/core</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'app-lifecycle-hook'</span> <span class="token punctuation">,</span> templateUrl <span class="token operator">:</span> <span class="token string">'./lifecycle-hook.component.html'</span> <span class="token punctuation">,</span> styleUrls <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./lifecycle-hook.component.css'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LifecycleHookComponent</span> <span class="token keyword">implements</span> <span class="token class-name">OnInit</span> <span class="token punctuation">{</span> <span class="token comment">// implements OnInit</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">ngOnInit</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span> <span class="token comment">// gọi đến hook ngOInit</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'ngOnInit : LifecycleHookComponent'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> container <span class="token punctuation">"</span></span> <span class="token attr-name">[style.margin-top.px]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 50 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-xs-12 col-sm-12 col-md-12 col-lg-12 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel panel-primary <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-heading <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-title <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ title }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-body <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ng-container</span> <span class="token attr-name">*ngIf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> isShowing <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> app-lifecycle-hook</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> app-lifecycle-hook</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ng-container</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">,</span> OnInit <span class="token punctuation">,</span> OnDestroy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'app-lifecycle-hook'</span> <span class="token punctuation">,</span> templateUrl <span class="token operator">:</span> <span class="token string">'./lifecycle-hook.component.html'</span> <span class="token punctuation">,</span> styleUrls <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./lifecycle-hook.component.css'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LifecycleHookComponent</span> <span class="token keyword">implements</span> <span class="token class-name">OnInit</span> <span class="token punctuation">,</span> OnDestroy <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">ngOnInit</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'ngOnInit : LifecycleHookComponent'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">ngOnDestroy</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'ngOnDestroy : LifecycleHookComponent'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
App.component.html file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> container <span class="token punctuation">"</span></span> <span class="token attr-name">[style.margin-top.px]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 50 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-xs-12 col-sm-12 col-md-12 col-lg-12 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel panel-primary <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-heading <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-title <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ title }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-body <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ng-container</span> <span class="token attr-name">*ngIf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> isShowing <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> app-lifecycle-hook</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> app-lifecycle-hook</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ng-container</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> button <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> btn btn-primary <span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> onToggle() <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Toggle <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
App.component.ts file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'app-root'</span> <span class="token punctuation">,</span> templateUrl <span class="token operator">:</span> <span class="token string">'./app.component.html'</span> <span class="token punctuation">,</span> styleUrls <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./app.component.css'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> title <span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">'Lifecycle Hook'</span> <span class="token punctuation">;</span> <span class="token keyword">public</span> isShowing <span class="token operator">:</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token function">onToggle</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> isShowing <span class="token operator">=</span> <span class="token operator">!</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> isShowing <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> container <span class="token punctuation">"</span></span> <span class="token attr-name">[style.margin-top.px]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 50 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-xs-12 col-sm-12 col-md-12 col-lg-12 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel panel-primary <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-heading <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h3</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-title <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ title }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h3</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> panel-body <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ng-container</span> <span class="token attr-name">*ngIf</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> isShowing <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token comment"><!-- sau khi nhận được kết quả từ total thì mình sẽ truyền nó sang app-lifecycle-hook --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> app-lifecycle-hook</span> <span class="token attr-name">[total]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> total <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> app-lifecycle-hook</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ng-container</span> <span class="token punctuation">></span></span> Số thứ nhất : <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> number <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token attr-name">[(ngModel)]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> num1 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Số thứ hai : <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> number <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token attr-name">[(ngModel)]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> num2 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> button <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> btn btn-primary <span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> totalNumber() <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Tính tổng <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
App.component.ts file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'app-root'</span> <span class="token punctuation">,</span> templateUrl <span class="token operator">:</span> <span class="token string">'./app.component.html'</span> <span class="token punctuation">,</span> styleUrls <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./app.component.css'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> title <span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">'Lifecycle Hook'</span> <span class="token punctuation">;</span> <span class="token keyword">public</span> isShowing <span class="token operator">:</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token keyword">public</span> num1 <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token keyword">public</span> num2 <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token keyword">public</span> total <span class="token operator">:</span> number <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token function">totalNumber</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> total <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> num1 <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> num2 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
File lifecycle-hook.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">,</span> Input <span class="token punctuation">,</span> OnChanges <span class="token punctuation">,</span> SimpleChanges <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> @ <span class="token function">Component</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'app-lifecycle-hook'</span> <span class="token punctuation">,</span> templateUrl <span class="token operator">:</span> <span class="token string">'./lifecycle-hook.component.html'</span> <span class="token punctuation">,</span> styleUrls <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./lifecycle-hook.component.css'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LifecycleHookComponent</span> <span class="token keyword">implements</span> <span class="token class-name">OnChanges</span> <span class="token punctuation">{</span> @ <span class="token function">Input</span> <span class="token punctuation">(</span> <span class="token string">'total'</span> <span class="token punctuation">)</span> total <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">ngOnChanges</span> <span class="token punctuation">(</span> <span class="token parameter">simpleChange <span class="token operator">:</span> SimpleChanges</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'ngOnChanges : LifecycleHookComponent'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> simpleChange <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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