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

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*
KZbin video "Angular's New Signal Inputs": kzbin.info/www/bejne/r5umlpSfjL12Zrc
KZbin video "Angular's New Model Inputs: Two-way Communication with your Child Components": kzbin.info/www/bejne/nKO7enWBpt-HgZI
Code: stackblitz.com/edit/output-deborahk
*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 KZbin 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: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#bestpractices
#angulartutorial
#angularparentchild
#componentcommunicationinAngular
#angularcomponentcommunication
#angularcomponentinteraction
#angularsignalinputs
#outputAPIsangular
#angular17.3output
#angularoutput
#angularnewoutputapi
#angularoutputproperty
#outputdecorator

[@towercontrol4450]

By far the best angular tutorials I ever seen! Simple and easy!

[@deborah_kurata]

Wow, thanks! 😊

[@ronaldobicca7101]

Deborah, awesome video! Not a surprise. You are fantastic. Thank you so much.

[@deborah_kurata]

That is so kind of you to say. 😊 Thank you!

[@youssefchaygani8518]

Awesome explanation, let's see if the Angular team is thinking about HostListener and HostBinding decorators consistency as well.

[@cachabacha03ify]

great video Deborah, thank youuuu

[@deborah_kurata]

😊

[@vijay_explorer]

Wow that's an awesome explanation, loved it!!

[@deborah_kurata]

Thank you so much!

[@message59]

thank you so much for all your videos you have been a great help from the beginning ☺👌

[@deborah_kurata]

Happy to hear that! Thank you!

[@alexanderlemberger5412]

Its the most intelligent and beautiful explanation on these new topics of signals. Thank you so much, you made my day :)))

[@deborah_kurata]

That is kind of you so say. Thank you! 😊

[@sunil24sunil]

Your awesome keeping doing more stuff of all 🙏

[@deborah_kurata]

Thank you so much! 😊

[@behzadkhosravanimajd]

Thank you, Master Deborah Kurata, for your generosity in sharing. God Bless.

[@deborah_kurata]

Thank you for watching! 😊

[@LarsRyeJeppesen]

We just went zoneless with our app - amazing!

[@deborah_kurata]

Congrats!

[@SirWilliamWalker]

Great video!

[@deborah_kurata]

Thanks!

[@techwake360]

that was awesome, Thanks

[@deborah_kurata]

Thanks! 😊

[@louisant1817]

Awesome content

[@deborah_kurata]

THANKS!

[@Saaad2]

Why you stopped creating Angular courses for PluralSight? Your Getting Started course was the best, haven't seen any such course anywhere and not only on React but I learnt other frameworks and libs too and no one is closer to your course. I just checked recently and your courses were marked as retired.

[@deborah_kurata]

Thank you for the kind words! It is definitely not by my choice.😥 Pluralsight will not allow me to update that course. They tell me that with the "Angular Fundamentals" course that my course was irrelevant. I *am* still doing courses for Pluralsight. I recently did this course: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals

[@Saaad2]

Thank you for responding me@@deborah_kurata The only reason I used and ever paid PluralSight was because of your Angular course.. your Getting Started course is such a comprehensive course which covered so much about Angular. Quick question: As Angular gets new version every 6 months and that course hasn't been updated recently, would you recommend anyone to take your Getting Started course even as it is marked as retired?

[@deborah_kurata]

It depends. Often companies aren't on the most recent version of Angular, so depending on your project, learning Angular with v14 may be useful. It also does cover many of the basic concepts you'll need. The "coding along" is a bit more challenging because if you install the Angular CLI, you'll get Angular v17 and not everything in the course is compatible with v17. Sometimes, it's just little differences. (For example, the Angular team implemented a new code compiler, so you no longer need a '~' in your style file paths.) But these little things can cause new developers to stumble when "coding along". Just watching the course (not "coding along") does provide a good base set of knowledge for using Angular.

[@Saaad2]

@@deborah_kurata Thank you so much for your time!

[@austinZen8800]

Thanks!

[@deborah_kurata]

Thank you so very much! 😊

[@richarddefortune1329]

My understanding is that effect() is still in experimental stage. Otherwise, I see myself reverting back to ngOnIni() or computed value just to process a side-effect. Thanks again for the video.

[@deborah_kurata]

Yes, effect is still in developer preview: angular.io/api/core/effect

[@SachalChandio]

you are doing awesome job at reviving this dead framework

[@deborah_kurata]

The reports of its death are greatly exaggerated! 😄

[@chellaack1644]

Mam your video is awesome and outstanding .no words to express my thanks.Mam can you please post a video in ngrx without lazy loading

[@deborah_kurata]

Thank you for the kind words. I'll add "more NgRx" videos to my list of future topics. 😊

[@chellaack1644]

@@deborah_kurata Thank you so much Mam

[@igorr4682]

What about if you have more than one signal and want to use the effect function ? In react you can add dependency array that will tell what state this effect should react to

[@deborah_kurata]

Yes, an effect can reference any number of signals and a change to any of them will trigger the effect.

[@salemhusseinidev]

Heyya, awesome video as always. I’m wondering though, incase of needing to get the filtered list from an API, how would you go about denouncing it?

[@deborah_kurata]

Thank you! I assume you mean debouncing? There are outputToObservable() and outputFromObservable() functions. Those are great topics for another video!

[@deborah_kurata]

I put together an example here: stackblitz.com/~/edit/outputfromobservable-deborahk I'll do a post about it soon.

[@salemhusseinidev]

@@deborah_kurata Sorry for the typo :) and thank you very much for the quick reply, nice and clear. All the best :)

[@ANTONZUBAREV]

thanks. And can you show us how to use debounce inside the effect method correctly?

[@deborah_kurata]

I put together an example here: stackblitz.com/~/edit/outputfromobservable-deborahk I'll do a post about it soon.

[@burak63783]

Thanks for the video. Can u tell me why u create a filterEff variable instand use the effect inside the constructor? 8:44 What are the benefits?

[@deborah_kurata]

Thank you for watching! Personally, I like to be declarative and declare effects as variables. It also allows you to built your own manual cleanup should you want to (using the variable). But primarily it is a personal style.

[@burak63783]

@@deborah_kurata I love this style. Never see it before. Do u have more styles for me 🤓

[@angelocolacicco997]

so, what's the difference between signal output and signal model? they look the same

[@deborah_kurata]

Model inputs are a signal and allows for two way binding. The parent can pass a value to the child. If the child modifies the value, the changed value is passed back to the parent. CHILD: value = model(0); PARENT: The output API is NOT a signal, it's an event. It is a one-way notification from the child to the parent. It allows for event binding so the parent can react to that event. CHILD: onChange = output(); PARENT:

[@qwertymuzaffar]

What if we use computed signal instead of effect, Will this work ?

[@deborah_kurata]

The purpose of the output API is to send events from the child component back to the parent component, providing notifications. If you need a value (or computed), you're better off using model inputs. Have you see that video? kzbin.info/www/bejne/nKO7enWBpt-HgZI

[@Nabulio85]

I love the way you explain things. Thx 🫶

[@deborah_kurata]

Thank you so much!

[@mateuszkowalski4987]

Great video!

[@deborah_kurata]

Thank you! 😊