angular-viewchild

What problem does it solve?

Provides clear guidance for reliably accessing DOM elements, child component instances, and projected content inside Angular components while avoiding common lifecycle and timing mistakes.

Core Features & Use Cases

• Query types: Explains when to use ViewChild, ContentChild, ViewChildren, and ContentChildren for single and multiple targets.
• Lifecycle & timing: Describes static vs dynamic queries and which lifecycle hooks (ngOnInit, ngAfterViewInit) to rely on.
• Advanced options: Covers the read option, QueryList iteration, integration with signals/effects, and accessing element vs component instances.
• Use Case: Focus an input after render, iterate over child items to initialize state, or access a projected template for custom rendering.

Quick Start

Use the angular-viewchild skill to review a component and convert unsafe DOM access into properly timed ViewChild/ViewChildren queries integrated with the correct lifecycle hooks.