Angular Web Framework Components & Templates 5 — Questions and Answers
Question 1: What is the purpose of `ng-template` in Angular?
- To define a reusable HTML fragment that Angular does not render by default (Correct answer)
- To create a shadow DOM boundary
- To declare a new component inline
- To wrap router outlets for lazy loading
Correct 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.
Question 2: How do you reference a `ng-template` defined in the same component's template and render it programmatically?
- Use a CSS selector on it
- Use @ViewChild with a TemplateRef and then createEmbeddedView() (Correct answer)
- Use *ngIf on the ng-template directly
- Use RouterLink to navigate to it
Correct answer: Use @ViewChild with a TemplateRef and then createEmbeddedView()
Grab the TemplateRef with @ViewChild, then call ViewContainerRef.createEmbeddedView(templateRef) to render it dynamically.
Question 3: What does `@ViewChild('myRef', { static: true })` mean in Angular?
- The query resolves after ngAfterViewInit only
- The query resolves before change detection runs, available in ngOnInit (Correct answer)
- The reference is read-only and cannot be reassigned
- The component is eagerly loaded at module startup
Correct 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.
Question 4: Which Angular feature allows a component to inject services or tokens from its own host element's injector rather than the global one?
- providedIn: 'root'
- ElementInjector via @Self() or providers in @Component (Correct answer)
- forRoot() pattern
- APP_INITIALIZER token
Correct 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.
Question 5: What is the difference between `ngAfterViewInit` and `ngAfterContentInit`?
- ngAfterViewInit runs before ngAfterContentInit
- ngAfterViewInit fires after the component's own view and child views are initialized; ngAfterContentInit fires after projected content is initialized (Correct answer)
- They are identical and can be used interchangeably
- ngAfterContentInit is deprecated in Angular 15+
Correct 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.
Question 6: In Angular's new `@if` control flow syntax (Angular 17+), how do you provide an else block?
- @else { ... } directly after the closing brace of @if (Correct answer)
- *ngIf with an else template reference
- An ngSwitch block
- @elseif { ... }
Correct 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.
Question 7: What is the correct way to pass data to an `ng-template` when rendering it via structural directive context?
- Using @Input on the template
- Using the `let-` prefix in the template to receive context variables (Correct answer)
- Using a service shared between host and template
- Using $event inside the template
Correct 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.
Angular Web Framework Components & Templates 5
What is the purpose of `ng-template` in Angular?