Compare views and elements reference wrappers.
01
01
Understand the problem
componentsviews
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
Using all three references in dynamic layout creation
import { Component, ViewChild, ElementRef, TemplateRef, ViewContainerRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-sandbox',
standalone: true,
template: '<input #inputField type="text" />' +
'<ng-template #templateRef><p>Inside dynamic view template</p></ng-template>' +
'<ng-container #viewContainer></ng-container>'
})
export class SandboxComponent implements AfterViewInit {
@ViewChild('inputField') inputEl!: ElementRef;
@ViewChild('templateRef') template!: TemplateRef<any>;
@ViewChild('viewContainer', { read: ViewContainerRef }) host!: ViewContainerRef;
ngAfterViewInit() {
this.inputEl.nativeElement.focus();
this.host.createEmbeddedView(this.template);
}
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.