mcpField
A
angular-lifecycle

angular-lifecycle

github.com/oguzhan18Development7176 installsUpdated 31w ago
Repository

About angular-lifecycle

A concise Angular 21 reference skill for developers implementing lifecycle hooks in components. It covers hook selection and common patterns for initialization, change handling, and cleanup.

Key features

  1. 01Guidance for initialization and cleanup
  2. 02Handling input changes
  3. 03View and projected content hooks
  4. 04Custom change detection
  5. 05Lifecycle hooks with OnPush

Use cases

  1. 01Choose hooks for component initialization
  2. 02Respond to changes in component inputs
  3. 03Clean up subscriptions on destruction
  4. 04Access DOM after view initialization

Install

Copy the command and run it in a terminal.

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

After installing, type/angular-lifecyclein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

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();
}

Comments

Markdown supported