Angular's New Output API: Emit notifications from your child components

Опубликовано: 09 Май 2024
на канале: Deborah Kurata

7,591

394

In Angular, we often need our child component to emit notifications to its parent component. Previously, we've used @Output properties for these notifications.

Starting in Angular version 17.3, we now have a new output API. Note that the new output is NOT a signal. So why did the Angular team define a new output API as part of its signal-ification of Angular?

In this video, we examine the new output API and outline its benefits.

Links
YouTube video "Angular's New Signal Inputs":    • Angular's New Signal Inputs

YouTube video "Angular's New Model Inputs: Two-way Communication with your Child Components":    • Angular's New Model Inputs: Two-way C...

Code: https://stackblitz.com/edit/output-de...

Content
00:00 Angular's new output API
01:18 Sample application
02:29 @Output property
04:07 Receiving notifications from the child component
05:58 Using the new output API
06:57 Aliasing an output
07:39 Using an effect to emit the notification
08:47 Benefits of the new output API
09:27 Wrap up

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and YouTube content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).

Contact me on Twitter:   / deborahkurata
Find my Pluralsight courses: https://www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: https://www.freecodecamp.org/news/aut...
View my YouTube content:    / @deborah_kurata

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#bestpractices
#angulartutorial
#angularparentchild
#componentcommunicationinAngular
#angularcomponentcommunication
#angularcomponentinteraction
#angularsignalinputs
#outputAPIsangular
#angular17.3output
#angularoutput
#angularnewoutputapi
#angularoutputproperty
#outputdecorator