@Output decorator with EventEmitter in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the EventEmitter class.

Angular

import { Component, [1] } from '@angular/core';

Drag options to blanks, or click blank then click option'

AInjectable

BInput

CNgModule

DEventEmitter

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Input instead of EventEmitter

Forgetting to import EventEmitter

Importing NgModule which is unrelated here

The EventEmitter class is imported from @angular/core to create custom events.

2fill in blank

medium

Complete the code to declare an output property named 'notify' using the @Output decorator.

Angular

@Output() [1] = new EventEmitter<string>();

Drag options to blanks, or click blank then click option'

Ainput

Bnotify

Cevent

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Input instead of @Output

Naming the property incorrectly

Not initializing with new EventEmitter()

The output property must be named notify to match the event name.

3fill in blank

hard

Fix the error in emitting the event with the message 'Hello'.

Angular

this.notify.[1]('Hello');

Drag options to blanks, or click blank then click option'

Atrigger

Bsend

Cemit

Ddispatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using send or trigger which are not EventEmitter methods

Forgetting parentheses after the method name

The emit method is used to send the event to the parent component.

4fill in blank

hard

Fill both blanks to declare an output property 'update' that emits numbers.

Angular

@Output() [1] = new [2]<number>();

Drag options to blanks, or click blank then click option'

Aupdate

Bnotify

CEventEmitter

DInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using Input instead of EventEmitter

Naming the property incorrectly

Not specifying the generic type

The property name is update and it must be an instance of EventEmitter with a number type.

5fill in blank

hard

Fill all three blanks to emit a boolean value 'true' from the output property 'status'.

Angular

this.[1].[2]([3]);

Drag options to blanks, or click blank then click option'

Astatus

Bemit

Ctrue

Dnotify

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'notify' instead of 'status' for the property

Using 'send' or other methods instead of 'emit'

Not passing a boolean value

The output property is status, the method to send events is emit, and the value emitted is true.