Compare query decorators for single vs multiple templates.
01
01
Understand the problem
componentsqueries
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
Read the code
Querying multiple template items using @ViewChildren
import { Component, ViewChildren, QueryList, AfterViewInit, ElementRef } from '@angular/core';
@Component({
selector: 'app-list',
standalone: true,
template: '<div #item>Item A</div><div #item>Item B</div><div #item>Item C</div>'
})
export class ListComponent implements AfterViewInit {
@ViewChildren('item') items!: QueryList<ElementRef>;
ngAfterViewInit() {
console.log('Total items matched:', this.items.length);
this.items.changes.subscribe(changes => {
console.log('List changed! New count:', changes.length);
});
}
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.