Components & Templates Flashcards
7 cards from real Angular Web Framework practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Components & Templates flashcards as text
What is the purpose of `ng-template` in Angular?
Answer: To define a reusable HTML fragment that Angular does not render by default
ng-template defines a template fragment that Angular stamps into the DOM only when explicitly instantiated by a directive or code.
How do you reference a `ng-template` defined in the same component's template and render it programmatically?
Answer: Use @ViewChild with a TemplateRef and then createEmbeddedView()
Grab the TemplateRef with @ViewChild, then call ViewContainerRef.createEmbeddedView(templateRef) to render it dynamically.
What does `@ViewChild('myRef', { static: true })` mean in Angular?
Answer: The query resolves before change detection runs, available in ngOnInit
{ static: true } resolves the ViewChild query during component initialization so it is available in ngOnInit, before the first change detection.
Which Angular feature allows a component to inject services or tokens from its own host element's injector rather than the global one?
Answer: ElementInjector via @Self() or providers in @Component
Listing providers inside the @Component decorator creates an ElementInjector scoped to that component tree; @Self() forces resolution from it.
What is the difference between `ngAfterViewInit` and `ngAfterContentInit`?
Answer: ngAfterViewInit fires after the component's own view and child views are initialized; ngAfterContentInit fires after projected content is initialized
ngAfterContentInit responds to ng-content projection completing, while ngAfterViewInit responds to the component's own template and child component views completing.
In Angular's new `@if` control flow syntax (Angular 17+), how do you provide an else block?
Answer: @else { ... } directly after the closing brace of @if
Angular 17's built-in control flow uses `@if (cond) { } @else { }` syntax inline without needing a separate ng-template.
What is the correct way to pass data to an `ng-template` when rendering it via structural directive context?
Answer: Using the `let-` prefix in the template to receive context variables
The `let-varName="contextProp"` syntax in an ng-template binds a template variable to a property of the context object passed by the directive.