angular-viewchild

Convert unsafe DOM access into timed ViewChild/QueryList queries in Angular components.

6|1|Updated Feb 18, 2026

Search Tags:#angular #signals #lifecycle #dom #viewchild #contentchild #querylist

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-viewchild
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-viewchild
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-viewchild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about angular-viewchild

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

FAQPage Schema

How do I safely access DOM elements and child component instances in Angular components?▼

To safely access DOM elements and child component instances in Angular, use ViewChild or ViewChildren queries integrated with the correct component lifecycle hooks to avoid timing errors. This ensures reliable references when manipulating elements or initializing child state.

When should I use ViewChild versus ContentChild for querying elements in Angular?▼

Use ViewChild for querying elements within a component's own view template, and use ContentChild for querying projected content passed into the component. ViewChildren and ContentChildren serve the same distinction when targeting multiple elements simultaneously.

Why is my Angular ViewChild query undefined during ngOnInit?▼

Your Angular ViewChild query is undefined during ngOnInit because dynamic queries resolve after view initialization. Use the ngAfterViewInit lifecycle hook for dynamic queries, or enable static query timing when the element does not depend on conditional rendering.

Does Angular ViewChild work with signals and effects?▼

Yes, Angular ViewChild supports signals compatibility for reactive query resolution. You can integrate view queries with signals and effects to reactively manage DOM element references and child component instances within your component's reactive workflows.

How do I iterate over multiple child elements using QueryList in Angular?▼

To iterate over multiple child elements using QueryList in Angular, use the ViewChildren decorator to retrieve a QueryList, then iterate through its items to initialize child state or coordinate actions across multiple child component instances.

Can I access a specific directive or component instance instead of a DOM element with Angular ViewChild?▼

Yes, you can access a specific directive or component instance instead of a native DOM element by using the read option in your Angular ViewChild query, allowing you to resolve element versus component instances based on your requirements.