@Output decorator with EventEmitter in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Output decorator in Angular?

The @Output decorator allows a child component to send data or events to its parent component. It marks a property as an event that the parent can listen to.

beginner

What role does EventEmitter play when used with @Output?

EventEmitter is a class that creates an event stream. When used with @Output, it lets the child component emit events that the parent component can subscribe to and react.

beginner

How do you emit an event from a child component using EventEmitter?

You call the emit() method on the EventEmitter instance, passing the data you want to send to the parent. For example: this.myEvent.emit(data);

beginner

In the parent component template, how do you listen to an event emitted by a child component's @Output property?

You use event binding syntax with parentheses around the event name, like . The $event holds the emitted data.

intermediate

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

It keeps components loosely coupled and follows Angular's unidirectional data flow. The child only emits events, and the parent decides how to handle them, improving maintainability.

What does the @Output decorator do in Angular?

A Allows a child component to send events to its parent

B Imports external modules

C Defines a service

D Creates a new component

The @Output decorator marks a property as an event that a child component can emit to notify its parent.

Which class is used with @Output to emit events?

A Promise

B Observable

C EventEmitter

D Subject

EventEmitter is the class used to create events that can be emitted from child to parent.

How do you emit an event named 'update' with data '42' from a child component?

A this.update.emit(42);

B emit.update(42);

C this.emit(update, 42);

D update.emitEvent(42);

You call the emit() method on the EventEmitter property, passing the data.

In the parent template, how do you listen to a child's @Output event named 'change'?

A <child {change}="onChange($event)"></child>

B <child [change]="onChange($event)"></child>

C <child #change="onChange($event)"></child>

D <child (change)="onChange($event)"></child>

Parent listens to child events using parentheses for event binding.

Why should components use @Output and EventEmitter instead of directly accessing child properties?

A To make components dependent on each other

B To keep components loosely coupled and maintain unidirectional data flow

C To increase code complexity

D To avoid using Angular features

Using @Output keeps components independent and follows Angular's design principles.

Explain how a child component can send data to its parent using @Output and EventEmitter in Angular.

Think about how events flow from child to parent.

Describe why using @Output with EventEmitter is important for component communication in Angular.

Consider the benefits of clear communication paths.