MEAN Angular State Management and Component Communication — Questions and Answers
Question 1: In Angular, which decorator is used to pass data from a parent component down to a child component's property?
- @Output()
- @Input() (Correct answer)
- @ViewChild()
- @HostBinding()
Correct answer: @Input()
@Input() marks a child component property so the parent can bind a value to it via property binding syntax: <app-child [title]="parentTitle">. @Output() goes the other direction, emitting events from child to parent via an EventEmitter.
Question 2: How does a child component emit a custom event to its parent in Angular?
- By calling this.parent.onEvent() directly
- By using @Output() with an EventEmitter and calling emit() (Correct answer)
- By modifying a shared variable in the global window object
- By using @Input() with a callback function property
Correct answer: By using @Output() with an EventEmitter and calling emit()
The standard Angular pattern for child-to-parent communication is to declare @Output() clicked = new EventEmitter<string>() in the child, call this.clicked.emit(value) on an event, and bind to it in the parent template with (clicked)="handleClick($event)".
Question 3: When two sibling Angular components (with no direct parent-child relationship) need to share state, what is the recommended approach?
- Use @Input()/@Output() chained through their common parent
- Use a shared Angular service with a BehaviorSubject to hold and broadcast state (Correct answer)
- Access the sibling's properties directly via ViewChild
- Store the shared state in the browser's sessionStorage
Correct answer: Use a shared Angular service with a BehaviorSubject to hold and broadcast state
A shared service with a BehaviorSubject (or similar reactive state) is the standard Angular pattern for sibling communication. Both siblings inject the same service instance, one writes to the BehaviorSubject, and the other subscribes to receive updates reactively.
Question 4: In NgRx, what is the role of a `Reducer`?
- It is a pure function that takes the current state and an action, and returns a new state (Correct answer)
- It fetches data from an API and dispatches the result as an action
- It selects a slice of state from the Store for use in a component
- It subscribes to the Store and applies side effects like logging
Correct answer: It is a pure function that takes the current state and an action, and returns a new state
An NgRx Reducer is a pure function with signature (state, action) => newState. It must not mutate the existing state or have side effects — it returns a new state object. Effects handle side effects (like API calls) and Selectors query the state.
Question 5: What is the purpose of Angular's `@ViewChild()` decorator?
- To get a reference to a child component instance or DOM element in the parent's TypeScript class (Correct answer)
- To pass data from a parent component to a child component
- To listen for events emitted by a child component
- To lazy-load a child component only when it becomes visible
Correct answer: To get a reference to a child component instance or DOM element in the parent's TypeScript class
@ViewChild() injects a reference to a child component, directive, or native DOM element directly into the parent's TypeScript class. This allows calling child component methods or reading DOM properties programmatically, available after ngAfterViewInit lifecycle hook.
Question 6: In NgRx, what is the correct way for a component to trigger a state change?
- Directly modify the state object returned by a Selector
- Call the Reducer function directly with a new state
- Inject the Store and call store.dispatch(myAction()) (Correct answer)
- Import the state object and mutate it via an Effect
Correct answer: Inject the Store and call store.dispatch(myAction())
In NgRx, state is read-only from the component's perspective. To change state, a component must inject the Store and dispatch an Action: this.store.dispatch(loadUsers()). The Store routes the action to the relevant Reducer, which computes and returns the new state.
MEAN Angular State Management and Component Communication
In Angular, which decorator is used to pass data from a parent component down to a child component's property?