Scribd
Upload
26 views2 pages

Angular Lifecycle Hooks

Angular components have a lifecycle that begins with instantiation and rendering, continues with change detection, and ends with destruction. Lifecycle hooks allow developers to manage key events during this lifecycle, including initialization, change detection, and cleanup. There are specific hooks for components and directives, as well as for child components, enabling better control over the application behavior.

Uploaded by

sarikastar1211
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views2 pages

Angular Lifecycle Hooks

Angular components have a lifecycle that begins with instantiation and rendering, continues with change detection, and ends with destruction. Lifecycle hooks allow developers to manage key events during this lifecycle, including initialization, change detection, and cleanup. There are specific hooks for components and directives, as well as for child components, enabling better control over the application behavior.

Uploaded by

sarikastar1211
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Angular Lifecycle hooks

A component instance has a lifecycle that starts when Angular instantiates the
component class and renders the component view and its child views. The lifecycle
continues with change detection, as Angular checks when data-bound properties
change and updates both view and component instances as needed.
The lifecycle ends when Angular destroys the component instance and removes its
rendered template from the DOM. Directives have a similar lifecycle, as Angular
creates, updates, and destroys instances in execution.
Your application can use lifecycle hook methods to tap into key events in a
component's lifecycle or instruct new instances to start, start detecting changes
when needed, update during deployment, and clean up the instances before deleting
them
Angular manages components and directives for us when it creates them, updates
them, or destroys them. With lifecycle hooks, we can gain better control of our
application.
To do this, we add some specific hook methods prefixed with ng to our component or
directive. These hooks are split into two types:
hooks for components or directives and hooks for child components.
These are the hooks for components or directives, in call order:
constructor()
OnChanges
OnInit
DoCheck
OnDestroy
And these are the hooks for a component’s children components:
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked
Below is a summary of the Angular lifecycle hooks in a table:
OnChanges

Called when the input properties have changed

OnInit

Called on initialization

DoCheck

Developer’s custom change detection

OnDestroy

Called before the component is destroyed

AfterContentInit

Called when the component’s content ngContent is initialized

AfterContentChecked

Called when the component’s content is updated or checked for updates


AfterViewInit

Called when the component’s projected view has been initialized

AfterViewChecked

Called after the projected view has been checked

Hooks for components or directives


In Angular, components are the smallest units of building blocks for a component
tree. This enables us to develop and maintain our codebase very easily. Components
are classes with the @Component() decorator on the them, like so:
@Component({
selector: "app-comp",
template: `<div>AppComponent</div>`,
styles: ``
})
class AppComponent implements OnInit {
//...
}

You might also like