Angular Lifecycle

Name: Angular Lifecycle
Author: oguzhan18

oguzhan18/angular-ecosystem-skills

173 installs
6 repo stars
Updated April 4, 2026
oguzhan18/angular-ecosystem-skills

Apply ngOnInit, ngOnChanges, ngOnDestroy, and signal effects correctly to initialize data, react to inputs, subscribe safely, and avoid memory leaks in components.

About

angular-lifecycle covers Angular component hooks—ngOnInit, ngOnChanges, ngOnDestroy, AfterViewInit, and signal effects—for safe initialization, input reactions, DOM timing, and subscription cleanup without leaks.

ngOnInit vs constructor guidance
ngOnChanges for @Input reactions
ngOnDestroy subscription cleanup
AfterViewInit for DOM access
Signal effect lifecycle patterns

Angular Lifecycle by the numbers

173 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #915 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-lifecycle

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oguzhan18/angular-ecosystem-skills/angular-lifecycle.svg)](https://skillselion.com/skills/oguzhan18/angular-ecosystem-skills/angular-lifecycle)

Installs	173
repo stars	★ 6
Last updated	April 4, 2026
Repository	oguzhan18/angular-ecosystem-skills ↗

What it does

Apply ngOnInit, ngOnChanges, ngOnDestroy, and signal effects correctly to initialize data, react to inputs, subscribe safely, and avoid memory leaks in components.

Files

SKILL.mdMarkdownGitHub ↗

Angular Lifecycle Hooks

Version: Angular 21 (2025) Tags: Lifecycle, Hooks, ngOnInit, ngOnChanges

References: Lifecycle Hooks • API

Best Practices

Use OnInit for initialization

import { OnInit } from '@angular/core';

@Component({})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Initialize data, call services
    this.loadData();
  }
}

Use OnDestroy for cleanup

import { OnDestroy } from '@angular/core';

@Component({})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Use OnChanges for input changes

import { OnChanges, SimpleChanges } from '@angular/core';

@Component({})
export class MyComponent implements OnChanges {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      console.log('Data changed:', this.data);
    }
  }
}

Use AfterViewInit for DOM manipulation

import { AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({})
export class MyComponent implements AfterViewInit {
  @ViewChild('el') el!: ElementRef;
  
  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}

Use AfterContentInit for projected content

import { AfterContentInit, ContentChild } from '@angular/core';

@Component({})
export class MyComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;
  
  ngAfterContentInit() {
    // Access projected content
  }
}

Use DoCheck for custom change detection

import { DoCheck } from '@angular/core';

@Component({})
export class MyComponent implements DoCheck {
  ngDoCheck() {
    // Custom change detection
  }
}

Use OnPush with lifecycle

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: any;
  
  ngOnChanges(changes: SimpleChanges) {
    // OnPush needs explicit change detection trigger
  }
}

Use constructor vs ngOnInit

// Constructor - for dependency injection only
constructor(private service: MyService) {}

// ngOnInit - for initialization logic
ngOnInit() {
  this.data = this.service.getData();
}