ngOnChanges ngOnChanges is a lifecycle hook that is triggered whenever an @Input() property changes, including before the component is rendered the first time. Common Use Cases: React to Input Changes : Fetch data, recalculate values, or run logic when an input changes. Reset Internal State : Clear or update internal variables based on new inputs. Track Previous vs Current Values : Useful for logs or conditional operations. Conditional API Calls : Trigger HTTP or DOM updates when inputs meet criteria. Cascading Dropdowns : Update dependent data like states based on selected country. Example: Parent Component: userName = 'John'; changeName() {   this.userName = 'Jane'; } Child Component: @Input() name!: string;   ngOnChanges(changes: SimpleChanges) {   const change = changes['name'];   console.log(`Name changed from ${change.previousValue} to ${chan...

ngAfterContentInit ngAfterContentInit is a lifecycle hook in Angular that is called  once  after the component’s  projected content  (i.e., content inserted using <ng-content>) has been fully initialized.   When Is It Triggered? Triggered  only once  after Angular  projects external content  into the component's view using <ng-content>. Common Use Cases: Accessing Projected Content Use @ContentChild or @ContentChildren to reference and interact with elements/components projected into the component. Logic Based on Projected Content Perform setup tasks such as validation or initializing internal state based on the content. Dynamic Behavior or Styling Customize appearance or behavior dynamically depending on the presence or nature of projected content. Custom Form Validatio...

ngAfterContentChecked (Angular Lifecycle Hook) ngAfterContentChecked is a lifecycle hook in Angular that is called after every change detection cycle, specifically for checking the projected content (i.e., content rendered via <ng-content>). Unlike ngAfterContentInit (which runs only once), this hook is triggered repeatedly as Angular checks for updates in projected content. When to Use ngAfterContentChecked: Use this hook when: You need to  react to dynamic changes  in projected content. You want to  monitor content inside <ng-content>  for updates. You want to  perform logic after every content check  (with caution due to potential performance issues). Common Use Cases: Detecting Changes in Projected Content Check if projected text, nodes, or elements have changed over time. Dynamic Layout or Styling Adjustments ...