When working with components it may be required to notify other components that something has happened. Perhaps a button has been clicked, an item has been added/removed from a list or some other important update has occurred. In this scenario components need to communicate with parent components.
Angular uses the output()
function to enable this type of behavior.
Note: Learn more about custom events in the outputs guide.
In this activity, you'll learn how to use the output()
function to communicate with components.
To create the communication path from child to parent components, use the output
function to initiaize a class property.
child.ts
@Component({...})class Child { incrementCountEvent = output<number>();}
Now the component can generate events that can be listened to by the parent component. Trigger events by calling the emit
method:
child.ts
class Child { ... onClick() { this.count++; this.incrementCountEvent.emit(this.count); }}
The emit function will generate an event with the same type as defined by the output
.
Alright, your turn to give this a try. Complete the code by following these tasks:
-
Add an
output()
propertyUpdate
child.ts
by adding an output property calledaddItemEvent
, be sure to set the output type to bestring
. -
Complete
addItem
methodIn
child.ts
update theaddItem
method; use the following code as the logic:child.ts
addItem() { this.addItemEvent.emit('🐢');}
-
Update the
App
templateIn
app.ts
update the template to listen to the emitted event by adding the following code:<app-child (addItemEvent)="addItem($event)" />
Now, the "Add Item" button adds a new item to the list every time the button is clicked.
Wow, at this point you've completed the component fundamentals - impressive 👏
Keep learning to unlock more of Angular's great features.