Angular Web Framework Components & Templates 5

Question 1

What is the purpose of `ng-template` in Angular?

Accepted Answer

To define a reusable HTML fragment that Angular does not render by default

Answer

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?

Accepted Answer

Use @ViewChild with a TemplateRef and then createEmbeddedView()

Answer

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?

Accepted Answer

The query resolves before change detection runs, available in ngOnInit

Answer

{ 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?

Accepted Answer

ElementInjector via @Self() or providers in @Component

Answer

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`?

Accepted Answer

ngAfterViewInit fires after the component's own view and child views are initialized; ngAfterContentInit fires after projected content is initialized

Answer

ngAfterContentInit responds to ng-content projection completing, while ngAfterViewInit responds to the component's own template and child component views completing.

Angular Web Framework Practice Test

Angular Web Framework Practice Test

Angular Web Framework Components & Templates 5