Angular @ViewChild and @ContentChild

Angular में @ViewChild और @ContentChild decorators parent component को allow करते हैं कि वो child component, directive या DOM element तक direct access करे। ये advanced component communication और DOM manipulation के लिए बहुत useful हैं।

इस chapter में आप सीखेंगे:

• @ViewChild क्या है और कैसे use करें
• @ContentChild क्या है और कैसे use करें
• DOM element या child component access करना
• Methods और properties call करना
• Best practices

1. @ViewChild – Parent to Child / DOM Access

@ViewChild parent component को allow करता है कि वो component template में मौजूद child component या element को access करे।

Basic Example – Accessing Child Component

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Child Component</p>`
})
export class ChildComponent {
  showAlert() {
    alert('Hello from Child!');
  }
}

// parent.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="callChildMethod()">Call Child Method</button>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child!: ChildComponent;

  ngAfterViewInit() {
    console.log('Child Component:', this.child);
  }

  callChildMethod() {
    this.child.showAlert();
  }
}

Explanation

• @ViewChild(ChildComponent) → child component का reference देता है
• ngAfterViewInit() lifecycle hook में reference ready होता है
• Parent child component के methods और properties call कर सकता है

Example – Access DOM Element

// parent.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<p #myParagraph>Highlight me!</p>
             <button (click)="highlight()">Highlight</button>`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('myParagraph') para!: ElementRef;

  ngAfterViewInit() {
    console.log('Paragraph Element:', this.para.nativeElement);
  }

  highlight() {
    this.para.nativeElement.style.backgroundColor = 'yellow';
  }
}

Explanation

• #myParagraph → template reference variable
• ElementRef → native DOM element access करने के लिए
• Parent DOM style modify कर सकता है

2. @ContentChild – Access Projected Content

@ContentChild parent को allow करता है कि वो child component में projected content access करे।

Example – Content Projection

// child.component.ts
import { Component, ContentChild, AfterContentInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<ng-content></ng-content>`
})
export class ChildComponent implements AfterContentInit {
  @ContentChild('projectedContent') content!: ElementRef;

  ngAfterContentInit() {
    console.log('Projected Content:', this.content.nativeElement.textContent);
  }
}

<!-- parent.component.html -->
<app-child>
  <p #projectedContent>This is projected!</p>
</app-child>

Explanation

• ng-content → parent content child component में project होता है
• @ContentChild('projectedContent') → projected element reference provide करता है
• ngAfterContentInit() → projected content ready होने पर access होता है

3. Differences – @ViewChild vs @ContentChild

Feature	@ViewChild	@ContentChild
Access	Child component or DOM inside template	Projected content inside child component (ng-content)
Timing	After ngAfterViewInit()	After ngAfterContentInit()
Use case	Call child methods, access DOM	Manipulate content projected from parent
Reference	Component class or ElementRef	Projected DOM ElementRef

Best Practices

• Direct DOM manipulation avoid करें, Angular templates और bindings prefer करें
• Heavy logic @ViewChild/@ContentChild में avoid करें
• Use static: true/false in @ViewChild/@ContentChild for early access
• Use lifecycle hooks properly (ngAfterViewInit / ngAfterContentInit)

@ViewChild('myPara', { static: false }) para!: ElementRef;

Summary

इस chapter में आपने सीखा:

• @ViewChild से parent component में child component और DOM element access करना
• @ContentChild से projected content access करना
• Differences और lifecycle hooks integration
• Best practices