MEAN Angular Components and Services 5 — Questions and Answers
Question 1: What is the role of Angular's ChangeDetectionStrategy.OnPush?
- Forces change detection to run on every browser event
- Limits change detection to run only when inputs change or an observable emits (Correct answer)
- Disables change detection entirely for the component
- Makes the component detect changes only on HTTP responses
Correct answer: Limits change detection to run only when inputs change or an observable emits
OnPush optimizes performance by only triggering change detection when the component's @Input references change or an async pipe resolves.
Question 2: Which method would you call on a service's Subject to both store the current value and emit it to new subscribers?
- Subject
- ReplaySubject(1)
- BehaviorSubject (Correct answer)
- AsyncSubject
Correct answer: BehaviorSubject
BehaviorSubject holds the current value and immediately emits it to any new subscriber upon subscription.
Question 3: What is the correct Angular template syntax for two-way data binding on an input element?
- [value]='name'
- (input)='name=$event.target.value'
- [(ngModel)]='name' (Correct answer)
- {{name}}
Correct answer: [(ngModel)]='name'
[(ngModel)] is the 'banana in a box' syntax that combines property binding and event binding for two-way data binding.
Question 4: In Angular, what does the async pipe do when used in a template?
- Converts a synchronous value to an Observable
- Subscribes to an Observable or Promise and returns the latest value, unsubscribing on component destroy (Correct answer)
- Delays rendering of the template by one tick
- Transforms a value asynchronously using a web worker
Correct answer: Subscribes to an Observable or Promise and returns the latest value, unsubscribing on component destroy
The async pipe automatically subscribes to Observables/Promises in templates and unsubscribes when the component is destroyed, preventing memory leaks.
Question 5: What is the purpose of ng-content in Angular component templates?
- It defines a lazy-loaded route outlet
- It creates a placeholder where parent components can project external content (Correct answer)
- It renders Angular Universal server-side content
- It injects HTTP response content into the view
Correct answer: It creates a placeholder where parent components can project external content
ng-content enables content projection, allowing parent components to pass HTML content into designated slots of a child component's template.
Question 6: Which Angular feature allows you to conditionally apply CSS classes to an element based on component state?
- [style] binding only
- [ngClass] directive (Correct answer)
- {{class}} interpolation
- @HostListener decorator
Correct answer: [ngClass] directive
[ngClass] accepts an object, array, or string and dynamically adds or removes CSS classes based on truthy/falsy expressions.
Question 7: What is the difference between ngOnChanges and ngDoCheck lifecycle hooks?
- ngOnChanges fires for all change detection cycles; ngDoCheck fires only when @Input changes
- ngOnChanges fires when @Input references change; ngDoCheck fires on every change detection run for custom detection logic (Correct answer)
- ngOnChanges handles DOM changes; ngDoCheck handles data model changes
- They are identical hooks with different names for backward compatibility
Correct answer: ngOnChanges fires when @Input references change; ngDoCheck fires on every change detection run for custom detection logic
ngOnChanges responds to Angular-detected @Input changes, while ngDoCheck runs on every change detection cycle allowing you to implement custom change detection.
MEAN Angular Components and Services 5
What is the role of Angular's ChangeDetectionStrategy.OnPush?