Angular Web Framework Components & Templates 4 — Questions and Answers
Question 1: What is a standalone component in Angular?
- A component with no child components
- A component that declares its own dependencies without an NgModule (Correct answer)
- A component that uses shadow DOM encapsulation
- A component that cannot be lazy-loaded
Correct answer: A component that declares its own dependencies without an NgModule
Standalone components use `standalone: true` and list their own imports, removing the requirement to be declared in an NgModule.
Question 2: In Angular's template, what does the safe navigation operator (`?.`) prevent?
- Circular dependency errors
- Null or undefined property access that would throw an error (Correct answer)
- XSS injection in interpolated values
- Infinite change detection loops
Correct answer: Null or undefined property access that would throw an error
The ?. operator short-circuits the expression if the left-hand side is null or undefined, preventing template errors.
Question 3: What ViewEncapsulation mode causes Angular to emit styles globally without any scoping?
- Emulated
- ShadowDom
- None (Correct answer)
- Native
Correct answer: None
ViewEncapsulation.None adds component styles to the global stylesheet with no attribute-based scoping applied.
Question 4: Which hook would you use to clean up subscriptions or timers before a component is removed from the DOM?
- ngOnDestroy (Correct answer)
- ngOnChanges
- ngAfterViewChecked
- ngDoCheck
Correct answer: ngOnDestroy
ngOnDestroy is called just before Angular destroys the component, making it the correct place to cancel subscriptions and clear intervals.
Question 5: What does `@ContentChildren(ItemComponent)` return inside a component?
- The first projected ItemComponent instance
- A QueryList of all projected ItemComponent instances (Correct answer)
- The template reference of the content slot
- A static array of child component factories
Correct answer: A QueryList of all projected ItemComponent instances
@ContentChildren queries projected content and returns a live QueryList containing all matching component or directive instances.
Question 6: What Angular template syntax enables two-way data binding on a form input using `ngModel`?
- [ngModel]="value"
- (ngModel)="value"
- [(ngModel)]="value" (Correct answer)
- {{ngModel}}="value"
Correct answer: [(ngModel)]="value"
The banana-in-a-box syntax [(ngModel)] combines property binding [ ] and event binding ( ) for two-way synchronization.
Question 7: If a child component receives a new object reference via @Input but ChangeDetectionStrategy.OnPush is set, will it re-render?
- No, OnPush never re-renders on input changes
- Yes, because a new object reference triggers OnPush change detection (Correct answer)
- Only if the object has a custom equals method
- Only if markForCheck() is called explicitly
Correct answer: Yes, because a new object reference triggers OnPush change detection
OnPush runs change detection when an @Input receives a new reference, so replacing the whole object (immutable update) triggers re-render.
Angular Web Framework Components & Templates 4
What is a standalone component in Angular?