Angular Life Cycle

 Angular LifeCycle:
Angular Components go through a sequence of lifecycle hooks from creation to destruction. These hooks let you run code at specific moments.

Lifecycle Flow:
                                           Constructor()
                                                    |
                                          ngOnChanges()
                                                    |
                                             ngOnInit()
                                                    |
                                           ngDoCheck()
                                                    |
                                         ngAfterContentInit()
                                                    |
                                    ngAfterContentChecked()
                                                    |
                                         ngAfterViewInit()
                                                    |
                                        ngAfterViewChecked()
                                                    |
                                           ngOnDestroy()

Contructor():
It initialize class, component . it runs first and heavy logic is avoided here .
Mostly used for inject services or dependency. 


ngOnChanges():
It is triggered when input properties change(@Input)
It detect and triggered when data received from parent component changes.
Parent Compoent

@Input(): is decorator that allows a child component to receive data from its parent compoents.

eg: Parent HTML <app-child [username]="parentName"></app-child>

child: @Input() username:strings

ngOnInit():
It run once after angular initializes the compoent.
it runs after constructor if ngOnChange is not detected, when the components are ready to use.
Mostly used for API Calls, setting Defaults values, subscribing to services and preparing data for an templates.

Syntax:    ngOnInit(){
                    
                    }

ngOnCheck():
It runs whenever angular runs change detection. 
it runs very freqently, even when no @Input( )reference changes.
it used for custom change detection logic and  for more control an can affect performance.

When to use:
Detech changes in nested objects
custom comparision logi
when ngOnChanges() is not enough

when not to use:
API calls
Heavy Calculation
Simple Input updates

ngAfterContentInit():
it runs once after angular projects external content into a component.
it run code after parent content is inserted into the child.

ngAfterContentChecked():
it runs everytime angular check projected content inside a component.
it runs after angular has checked and updated content coming from the parent component.


when it runs
runs multiple times during change detection
runs whenever projected content is checked/updated.

ngAfterViewInit():
It runs once after angular initializes the component's view and its child views.
it runs when the template and all child components are fully loaded and ready.

Access DOM elements using @ViewChild
initialize third party librares
Manipulate UI after rendering.


ngAfterViewChecked()
it runs after angular checks the component's view and all child views.
it runs every time angular verifies or updates the UI

Uses:
Debugging view updates, tracking UI changes and rare cases of manual DOM synchronization,

ngOnDestroy():
it runs just before a component is removed destroy from DOM.

uses:
Unsubscribing from observalbles.
clear timers or intervals
remove event listeners

Comments

Post a Comment

Popular posts from this blog

Angular Guides Notes

Image
 Angular  Angular is framework that is developed and maintained by google.It is  powerful, full-featured framework for building large-scale, structured frontend applications , especially useful in enterprise-level projects. Core Foundation  a.Components b.Services c.Data Binding d.Templates e.Routes g.Life Cycle Hooks a.Component A component is the fundamental building block of every Angular UI. Each one owns a slice of the screen and is defined by three things working together: a TypeScript class (the logic), an HTML template (the view), and CSS styles (the appearance). The decorator @Component wires them together and tells Angular where to render the component via its selector . Components communicate with each other through @Input() (data flowing in from a parent) and @Output() with EventEmitter (events flowing out to a parent). This creates a clear, predictable data flow through the component tree. Here's how the structure looks: In code: Directives: Directi...
Read more

SIGNALS

Signals: Signals is a system that tracks your states throughoout an application, allowing the framework to optimize rendering updates. It is either Writable or read-only. Writable Signals: It provide an API for updating their values directly.we can create an writable signals by calling the signal function with the signals initial value: const count =signal(0); console.log('The count is :'+count()); to change the value we use .set() or .update() count.set(3) or  count.update((value)=> value +1);
Read more

Directives

Directives Directives are classes that add additional behavior to elements in your Angular applications. There are three types of directives provided by angular: 1.Attribute Directives 2.Component Directives 3. Structural Directives 1.Attribute Directives: It is an directives which enables us to change   the appearance or behavior of DOM elements and Angular components with attribute directives. CLI for Directives  : ng  generate  directive  highlight eg: import {Directive, ElementRef, inject} from '@angular/core'; @Directive({      selector: '[appHighlight]', }) export class HighlightDirective {      private el = inject(ElementRef);     constructor() {                this.el.nativeElement.style.backgroundColor = 'yellow';                }    } where  The   @Directive()  decorator's configuration pro...
Read more