Angular Web Framework Angular Advanced Practice 5 — Questions and Answers
Question 1: In Angular, what is the difference between `ViewChild` and `ContentChild`?
- ViewChild queries the host component's template; ContentChild queries content projected via ng-content (Correct answer)
- ViewChild is for directives; ContentChild is for components only
- ContentChild queries the component's own template; ViewChild queries parent templates
- They are identical; one is deprecated
Correct answer: ViewChild queries the host component's template; ContentChild queries content projected via ng-content
ViewChild accesses elements/components defined in the component's own template, while ContentChild accesses elements projected into the component from the outside via <ng-content>.
Question 2: Which Angular feature would you use to share state between sibling components without a shared parent component or a service?
- Input/Output bindings
- A shared singleton service with a BehaviorSubject or Signal (Correct answer)
- Route resolvers
- ViewEncapsulation.None
Correct answer: A shared singleton service with a BehaviorSubject or Signal
A singleton service holding a BehaviorSubject or Signal acts as a shared state store that any component can inject, read, and write regardless of their position in the component tree.
Question 3: What problem does the `NgZone.runOutsideAngular()` method solve?
- It prevents a component's template from rendering
- It runs code without triggering Angular's change detection, avoiding unnecessary UI checks for frequent events like scroll or mousemove (Correct answer)
- It executes code in a worker thread
- It disables all RxJS subscriptions for the duration of the callback
Correct answer: It runs code without triggering Angular's change detection, avoiding unnecessary UI checks for frequent events like scroll or mousemove
Running high-frequency event handlers outside Angular's zone stops them from triggering change detection on every event, significantly improving performance.
Question 4: In Angular's dependency injection, what does the `@Self()` decorator do?
- Limits DI resolution to the component's own injector only, not parent injectors (Correct answer)
- Makes the dependency optional if not found
- Searches only the root module injector
- Forces a new instance of the service for each request
Correct answer: Limits DI resolution to the component's own injector only, not parent injectors
@Self() tells Angular to only look for the dependency in the current component or directive's own injector and throw if not found there.
Question 5: What is the purpose of `ng-template` combined with `*ngTemplateOutlet` in Angular?
- To define reusable template fragments that can be rendered conditionally or in multiple locations (Correct answer)
- To create a shadow DOM boundary for style encapsulation
- To lazy-load a child component asynchronously
- To bind two-way data between parent and child components
Correct answer: To define reusable template fragments that can be rendered conditionally or in multiple locations
ng-template defines an inert template block, and ngTemplateOutlet renders it at a chosen location with optional context variables, enabling powerful template reuse patterns.
Question 6: Which Angular build option enables differential loading to produce separate ES5 and ES2015+ bundles for different browsers?
- tsconfig `target: 'es5'` combined with `browserslist` config (Correct answer)
- Setting `optimization: true` in angular.json
- Using the `--legacy-browsers` CLI flag
- Enabling `aot: false` in the build config
Correct answer: tsconfig `target: 'es5'` combined with `browserslist` config
Angular's build system reads the browserslist file and tsconfig target to automatically generate ES5 (legacy) and modern ES2015+ bundles, serving each to the appropriate browser.
Question 7: What is the Angular `Renderer2` class used for, and why is it preferred over directly manipulating the DOM?
- It provides a platform-agnostic API for DOM manipulation, enabling server-side rendering and web worker compatibility (Correct answer)
- It is a faster replacement for querySelector in large component trees
- It enables two-way binding without using ngModel
- It automatically batches DOM updates to reduce repaints
Correct answer: It provides a platform-agnostic API for DOM manipulation, enabling server-side rendering and web worker compatibility
Renderer2 abstracts DOM operations so that Angular code can run in environments without a real DOM (like SSR with Angular Universal or Web Workers) without modification.
Angular Web Framework Angular Advanced Practice 5
In Angular, what is the difference between `ViewChild` and `ContentChild`?