Sunday 18 February 2024

Difference between ViewChild and ViewChildren? What is QueryList Angular ? 97

 Difference between ViewChild and ViewChildren? What is QueryList Angular ?

In Angular, both ViewChild and ViewChildren are decorators used to access elements or directives from the view within a component's TypeScript code. However, they differ in their functionality and use cases:


  • Used to retrieve a single element or directive with a specific reference variable name or type.

  • Returns a single instance of the element or directive as a property in your component class.

  • Ideal for accessing individual child components, specific elements for manipulation, or directives with programmatic control.


  • Used to retrieve an array of elements or directives matching a selector or type.

  • Returns a QueryList, which is an observable collection of matching elements that can change dynamically.

  • Suitable for dealing with multiple elements of the same type, iterating over them, or responding to changes in their presence.


  • Represents a dynamic collection of elements or directives retrieved using ViewChild or ViewChildren.

  • Provides methods like length, changes, and forEach to access and manipulate the elements.

  • Emits changes through the changes observable whenever the list of elements updates.

Key Differences:




Number of elements

Retrieves a single element

Retrieves an array of elements

Return type

Instance of the element/directive

QueryList (observable collection of elements)

Use cases

Individual element access, specific manipulation

Multiple elements, iteration, dynamic changes response



@Component({ /* ... */ })
export class ParentComponent {
  @ViewChild('myButton') button: ElementRef; // Single element access
  @ViewChildren('myListItems') items: QueryList<ElementRef>; // Array of elements

  ngAfterViewInit() {; // Access single element
    this.items.forEach(item => console.log(item.nativeElement)); // Iterate over elements


  • Use ViewChild when you need access to a single specific element or directive.

  • Use ViewChildren when you need to work with multiple elements of the same type or respond to changes in their presence.

  • Leverage the QueryList provided by ViewChildren to effectively manage and react to updates in the retrieved elements.

By understanding the distinctions and appropriate use cases of ViewChild and ViewChildren, you can create more flexible and interactive components in your Angular applications.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.