What is the difference between ViewChild and ContentChild?
Assesses fundamental understanding of Angular conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Both are query decorators, but they search different places. @ViewChild queries the component's own template, while @ContentChild queries content projected into the component through ng-content.
@Component({ selector: 'app-tabs', template: '<ng-content></ng-content>' })
export class TabsComponent {
@ContentChildren(TabComponent) tabs!: QueryList<TabComponent>;
@ViewChild('panel') panel!: ElementRef;
}
So a tabs component uses ContentChild to find the tabs a consumer projected, and ViewChild to find elements it owns itself. ViewChildren and ContentChildren return a QueryList that updates as the template changes.
Queries accept a local template reference string, a directive or component type, and options { read, static }. static: true resolves the query before ngAfterViewInit or ngAfterContentInit and is required if you need the result in ngOnInit; otherwise results are set later. In newer Angular, the signal-based viewChild() and contentChild() functions are the recommended alternative.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.