Angular Web Framework State Management & Change Detection 1 — Questions and Answers
Question 1: Which Angular strategy checks only the current component and its ancestors when an input reference changes?
- Default
- OnPush (Correct answer)
- Detached
- Manual
Correct answer: OnPush
OnPush change detection only runs for a component when its input references change, an event originates from it, or an async pipe resolves.
Question 2: What method on ChangeDetectorRef temporarily stops change detection for a component subtree?
- markForCheck()
- detectChanges()
- detach() (Correct answer)
- reattach()
Correct answer: detach()
detach() removes the component from the change detection tree until reattach() is called.
Question 3: Which NgRx building block is a pure function that takes the current state and an action, and returns a new state?
- Effect
- Selector
- Reducer (Correct answer)
- Action
Correct answer: Reducer
A reducer is a pure function (state, action) => newState that never mutates the existing state object.
Question 4: In NgRx, which construct handles side effects such as HTTP calls and dispatches new actions on completion?
- Reducer
- Selector
- Effect (Correct answer)
- Store
Correct answer: Effect
NgRx Effects listen for dispatched actions, perform side effects, and optionally dispatch new actions back to the store.
Question 5: Which NgRx function creates a memoized, reusable piece of state-derived data?
- createAction()
- createReducer()
- createSelector() (Correct answer)
- createEffect()
Correct answer: createSelector()
createSelector() returns a memoized selector that recomputes only when its input selectors produce new values.
Question 6: What does calling markForCheck() on a component using OnPush change detection do?
- Immediately runs change detection
- Detaches the component from the tree
- Marks the component and its ancestors to be checked on the next cycle (Correct answer)
- Reattaches a detached component
Correct answer: Marks the component and its ancestors to be checked on the next cycle
markForCheck() flags the component and its ancestors so Angular includes them in the next change detection run.
Which Angular strategy checks only the current component and its ancestors when an input reference changes?