MEAN Angular State Management and Component Communication

Question 1

In Angular, which decorator is used to pass data from a parent component down to a child component's property?

Accepted Answer

@Input()

Answer

@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?

Accepted Answer

By using @Output() with an EventEmitter and calling emit()

Answer

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?

Accepted Answer

Use a shared Angular service with a BehaviorSubject to hold and broadcast state

Answer

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`?

Accepted Answer

It is a pure function that takes the current state and an action, and returns a new state

Answer

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?

Accepted Answer

To get a reference to a child component instance or DOM element in the parent's TypeScript class

Answer

@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.

MEAN - Stack Development Practice Test

MEAN - Stack Development Practice Test

MEAN Angular State Management and Component Communication