Component Life Cycle in Angular
Component Life Cycle in Angular from creation to removal, and understanding that flow will help you design quality components. There can be slight variances in how a component’s lifecycle behaves depending on the build tooling used, but in most cases that tooling will be the Angular CLI.
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM.
For Free Demo classes Call: 020-71173125
Registration Link: Click Here!
There are important phases of the lifecycle that Angular components go through as explained in the next sections:
1] The first major action is that a component is registered with the App module. This usually happens because we declare a component as part of the NgModule metadata and occurs during application bootstrap, but components could also be registered dynamically on the fly later while the application is running. When the component is registered, it creates a component factory class and stores it for later use.
2] Then, during the application lifecycle, something will request the component. This is typically because the component was found in a template and the compiler needs the component, but sometimes components are also requested manually. At this point, an instance of the component needs to be loaded. There is a registry of components that belong to the module, and Angular will look up the component in question and retrieve its component factory, which is generated during the compilation using the CLI before the app is run. This special class knows how to instantiate a new instance of the component.
3] As the component is instantiated, the metadata is read and the constructor method is fired. Any construction logic will run early in the component’s life, and you should be careful not to put anything that might depend on child components being available because the template won’t have been parsed yet.
4] The component metadata will then be fully processed by Angular, including the parsing of the component template, styles, and bindings. If the template contains any child components, those will kick off the same lifecycle for those components as well, but they won’t block this component from continuing to render. At this point, we’ve initialized the component, and a cycle begins where the child components become fully rendered, the application state changes and the components are updated.
5] During this cycle, lifecycle hooks will fire to alert you to important times when you know it’s safe to do certain actions. For example, there’s a lifecycle hook that lets you know when any of the inputs have changed; another lets you know when all the child components have fully resolved.
6] At some point, the component may no longer be needed in the application. At that point, Angular will destroy the component and all of its children.
For Free Demo classes Call: 020-71173125
Registration Link: Click Here!
Component Lifecycle Hooks
Lifecycle hooks are special methods with specific names that are called during the component’s lifecycle if they are defined. Remember Angular will only run a lifecycle hook if it is defined in the component. The lifecycle hooks are implemented in your controllers, you prefix it with ng as well. Please note that they are not like event listeners.
During the application rendering process and reaction to user inputs, various hooks can be used to run code at various checkpoints. These hooks are useful when you need to know that certain conditions are true before executing the code, such as ensuring that child components have been initialized, or when changes are detected. The hooks give you the opportunity to act on a component instance at the appropriate moment, as Angular creates, updates, or destroys that instance.
Please find below the list of hooks
Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before the deletion of instances.
For Free Demo classes Call: 020-71173125
Registration Link: Angular Training in Pune!
The OnInit lifecycle hook runs early in the cycle but after all bindings have been resolved, so it’s safer to know that all data is available for the component. OnInit needs to be implemented as the ngOnInit() method.
The OnInit, OnChanges, and OnDestroy hooks are the most commonly used lifecycle hooks. The DoCheck, AfterContentChecked, and AfterViewChecked hooks are most useful to keep track of logic that needs to run during any change detection process and respond if necessary. The OnInit, AfterContentInit, and AfterViewInit hooks are primarily useful to run logic during the component’s initial rendering to set it up, and each one ensures a different level of component integrity such as it is ready or if the child components are also ready.
Do watch our Components Of Angular video on YouTube.
Author:-
Dharamraj Pawale
Call the Trainer and Book your free demo class for Angular now!!!
© Copyright 2020 | SevenMentor Pvt Ltd