Angular Viewchild

Name: Angular Viewchild
Author: oguzhan18

oguzhan18/angular-ecosystem-skills

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

Implement ViewChild, ViewChildren, and ContentChild queries to access child components, directives, and DOM elements safely in Angular templates and lifecycle hooks.

About

Teaches correct Angular ViewChild and related query APIs: when to use static versus dynamic queries, how to reference child components and ElementRef instances, lifecycle timing with AfterViewInit, and pitfalls around change detection and template availability in real components.

Static vs dynamic query timing
ViewChild and ViewChildren decorators
ContentChild for projected content
AfterViewInit lifecycle usage
Type-safe element and component refs

Angular Viewchild by the numbers

172 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #918 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-viewchild

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-viewchild.svg)](https://skillselion.com/skills/oguzhan18/angular-ecosystem-skills/angular-viewchild)

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

What it does

Implement ViewChild, ViewChildren, and ContentChild queries to access child components, directives, and DOM elements safely in Angular templates and lifecycle hooks.

Files

SKILL.mdMarkdownGitHub ↗

Angular ViewChild / ContentChild

Version: Angular 21 (2025) Tags: ViewChild, ContentChild, DOM, Queries

References: ViewChild API • ContentChild API

Best Practices

Use ViewChild for element reference

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

@Component({})
export class MyComponent implements AfterViewInit {
  @ViewChild('input') inputEl!: ElementRef<HTMLInputElement>;
  
  ngAfterViewInit() {
    this.inputEl.nativeElement.focus();
  }
}

Use static option

// Static - available in ngOnInit
@ViewChild('static', { static: true }) staticEl!: ElementRef;

// Dynamic - available in ngAfterViewInit
@ViewChild('dynamic', { static: false }) dynamicEl!: ElementRef;

Use ContentChild for projected content

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

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {
  @ContentChild(TemplateRef) headerTemplate!: TemplateRef<any>;
}

Use ViewChildren for multiple elements

import { ViewChildren, QueryList } from '@angular/core';

@Component({})
export class ListComponent {
  @ViewChildren('item') items!: QueryList<ElementRef>;
  
  ngAfterViewInit() {
    this.items.forEach(item => console.log(item));
  }
}

Use read option

@ViewChild('component', { read: ViewContainerRef }) container!: ViewContainerRef;

@ViewChild('template', { read: TemplateRef }) template!: TemplateRef<any>;

Access component instance

@ViewChild(ChildComponent) child!: ChildComponent;

ngAfterViewInit() {
  this.child.doSomething();
}

Use with signals

@ViewChild('el') el!: ElementRef<HTMLElement>;

ngAfterViewInit() {
  effect(() => {
    if (this.shouldFocus()) {
      this.el.nativeElement.focus();
    }
  });
}