angular-lifecycle

Implement and manage Angular component lifecycle hooks with code examples.

6|1|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-lifecycle
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-lifecycle
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-lifecycle
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-lifecycle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps developers correctly implement and manage Angular component lifecycle hooks to avoid initialization mistakes, missed cleanup, DOM timing issues, and change detection bugs that lead to memory leaks and subtle runtime errors.

Core Features & Use Cases

  • Initialization guidance: Use ngOnInit to move initialization logic out of constructors and call services at the proper time.
  • Cleanup patterns: Implement OnDestroy and observable teardown patterns to prevent leaks and dangling subscriptions.
  • Input & DOM handling: Provide strategies for ngOnChanges, AfterViewInit, and AfterContentInit to react to input changes and safely access the DOM or projected content.
  • Change detection & optimization: Explain OnPush interactions and when to trigger manual change detection or use immutability.
  • Use Case: Refactor a component that currently performs network calls in the constructor, add input change handling, and ensure proper subscription cleanup during teardown.

Quick Start

Ask the assistant to review a component and convert initialization to ngOnInit, handle inputs with ngOnChanges, move DOM access to ngAfterViewInit, and add cleanup in ngOnDestroy.

Frequently Asked Questions about angular-lifecycle

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I properly manage Angular component lifecycle hooks to avoid memory leaks?

Manage Angular component lifecycle hooks by implementing ngOnDestroy for observable teardown and subscription cleanup, which prevents memory leaks and safely destroys components during navigation.

Why should I move network calls out of the Angular component constructor?

Moving network calls out of the constructor to ngOnInit ensures the component is fully initialized, allowing services to execute safely at the proper time during the Angular lifecycle.

How do I handle input changes and DOM manipulation safely in Angular components?

Handle input changes and DOM manipulation safely by using ngOnChanges to react to input updates and ngAfterViewInit to manipulate the DOM only after the Angular view fully initializes.

What is the best way to optimize Angular change detection with OnPush?

Optimize Angular change detection with OnPush by leveraging immutability for inputs and triggering manual change detection only when necessary, reducing unnecessary checks and improving performance.

When do I need ngAfterContentInit versus ngAfterViewInit in Angular directives?

You need ngAfterContentInit to access projected content and ngAfterViewInit to access the component's own view, ensuring correct DOM timing for different Angular rendering scopes.