Angular Advanced Practice 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 Angular Advanced Practice flashcards as text
In Angular, what is the difference between `ViewChild` and `ContentChild`?
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 .
Which Angular feature would you use to share state between sibling components without a shared parent component or a service?
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.
What problem does the `NgZone.runOutsideAngular()` method solve?
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.
In Angular's dependency injection, what does the `@Self()` decorator do?
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.
What is the purpose of `ng-template` combined with `*ngTemplateOutlet` in Angular?
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.
Which Angular build option enables differential loading to produce separate ES5 and ES2015+ bundles for different browsers?
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.
What is the Angular `Renderer2` class used for, and why is it preferred over directly manipulating the DOM?
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.