@ViewChild vs @ViewChildren in Angular

In Angular, both @ViewChild and @ViewChildren are used to access elements, components, or directives from the component’s view (HTML template).

The main difference is:

• @ViewChild → gets single element/component/directive

• @ViewChildren → gets multiple elements/components/directives

1. @ViewChild

Purpose

Used to access one child element or component from the template.

Syntax

@ViewChild(ChildComponent) child!: ChildComponent;

OR

@ViewChild('txtName') inputElement!: ElementRef;

Example — Access Child Component

Child Component

@Component({
  selector: 'app-child',
  template: `<h2>Child Component</h2>`
})
export class ChildComponent {
  
  showMessage() {
    console.log('Hello from Child');
  }

}

Parent Component

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>

    <button (click)="callChild()">
      Call Child Method
    </button>
  `
})
export class ParentComponent {

  @ViewChild(ChildComponent)
  childComponent!: ChildComponent;

  callChild() {
    this.childComponent.showMessage();
  }

}

Common Uses of @ViewChild

• Access child component methods

• Access DOM elements

• Focus input fields

• Integrate third-party libraries

• Access directives

Example — Access HTML Element

<input #txtName type="text">

<button (click)="focusInput()">
  Focus
</button>

@ViewChild('txtName')
input!: ElementRef;

focusInput() {
  this.input.nativeElement.focus();
}

2. @ViewChildren

Purpose

Used to access multiple child elements/components/directives.

It returns a QueryList.

Syntax

@ViewChildren(ChildComponent)
children!: QueryList<ChildComponent>;

Example — Multiple Child Components

Parent Template

<app-child></app-child>
<app-child></app-child>
<app-child></app-child>

<button (click)="showChildren()">
  Show
</button>

Parent Component

@ViewChildren(ChildComponent)
children!: QueryList<ChildComponent>;

showChildren() {

  this.children.forEach(child => {
    child.showMessage();
  });

}

What is QueryList?

@ViewChildren returns a QueryList.

It behaves similar to an array but is dynamic.

this.children.toArray()

Useful methods:

forEach()
map()
filter()
first
last
length

Key Differences

Feature	@ViewChild	@ViewChildren
Returns	Single item	Multiple items
Result Type	Component/ElementRef	QueryList
Used For	One child	Multiple children
Access	Direct	Iterate using loop
Dynamic Updates	No collection	Collection updates automatically
Typical Use	Focus input, call one child	Handle repeated child components

Lifecycle Hook Usage

Usually accessed inside:

ngAfterViewInit()

Because child views initialize after component rendering.

Example

ngAfterViewInit() {
  console.log(this.child);
}

Static Option in @ViewChild

@ViewChild('myDiv', { static: true })
div!: ElementRef;

static: true

Available in:

ngOnInit()

Used when element is always present.

static: false (default)

Available in:

ngAfterViewInit()

Used when element depends on conditions like:

<div *ngIf="showDiv"></div>

Interview Questions

1. What is the difference between @ViewChild and @ViewChildren?

Answer

• @ViewChild accesses a single child element/component.

• @ViewChildren accesses multiple child elements/components and returns a QueryList.

2. When should you use ngAfterViewInit()?

Answer

Because view children are initialized only after Angular finishes rendering the component view.

3. What does @ViewChildren return?

Answer

It returns a QueryList.

4. Can @ViewChild access DOM elements?

Answer

Yes, using template reference variables and ElementRef.

Important Interview Point

@ViewChild vs Dependency Injection

Many beginners confuse these.

@ViewChild	Dependency Injection
Accesses template/view children	Injects services
Used for components/elements	Used for singleton/shared logic

Real-Time Use Cases

Scenario	Decorator
Focus textbox	@ViewChild
Open modal component	@ViewChild
Handle multiple cards/items	@ViewChildren
Validate multiple child forms	@ViewChildren

Performance Note

Avoid excessive direct DOM manipulation using:

nativeElement

Prefer Angular bindings whenever possible.

Short Interview Answer

@ViewChild is used to access a single child component, directive, or DOM element from the template, whereas @ViewChildren is used to access multiple child elements and returns a QueryList. Both are typically initialized in ngAfterViewInit().