Child to parent communication flow in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main way a child component sends data to its parent in Angular?

The child component uses an @Output property with an EventEmitter to send data to the parent component.

beginner

How do you declare an event in a child component to notify the parent?

You declare an @Output() eventName = new EventEmitter<type>(); in the child component class.

beginner

How does the parent component listen to events from the child component?

In the parent template, bind to the child's event like <child (eventName)="parentHandler($event)"></child>.

intermediate

Why is using @Output with EventEmitter better than directly accessing child properties?

It keeps components loosely coupled and follows Angular's unidirectional data flow, making the app easier to maintain.

beginner

What is the role of the $event object in child to parent communication?

$event carries the data emitted by the child component's EventEmitter and is received by the parent's event handler.

Which decorator is used in Angular to send data from a child to a parent component?

A @Output

B @Input

C @ViewChild

D @Injectable

The @Output decorator is used with EventEmitter to send data from child to parent.

What Angular class is used to emit events from a child component?

A Observable

B EventEmitter

C Subject

D Promise

EventEmitter is the class used to emit custom events in Angular components.

How does the parent component receive data from the child component's event?

A By using @Input in the parent

B By calling a method on the child component directly

C By binding to the child's event in the template using (eventName)

D By using a service only

The parent listens to the child's event by binding to it in the template with (eventName).

What does the $event variable represent in Angular event binding?

A The Angular lifecycle hook

B The parent component instance

C The child component's template

D The data emitted by the child component's event

$event holds the data sent from the child component's EventEmitter.

Which of these is NOT a recommended way to communicate from child to parent in Angular?

A Directly modifying parent properties from child

B Using event binding in the parent template

C Using @Output with EventEmitter

D Passing data via emitted events

Directly modifying parent properties from child breaks encapsulation and is not recommended.

Explain how a child component sends data to its parent in Angular. Include the decorators and classes involved.

Think about how events work in Angular templates.

Describe why using @Output and EventEmitter is a good practice for child to parent communication in Angular.

Consider component independence and data flow direction.