Angular's New Model Inputs: Two-way Communication with your Child Components

In Angular, we often want two-way communication between our parent component and its child component. The parent passes a value to the child component. The child component modifies that value, and passes the changed value back to the parent.
Accomplishing this task used to be a bit complicated. The child component would define an @Input property to get the value from the parent component. And define an @Output property to send a notification event with the new value.
Starting in Angular version 17.2, we can use a model input to easily two-way bind data between a parent component and a child component!
In this video, we examine the new model input. We then walk through how to react to changes in that input: first using event binding, then using computed signals.
*NOTE*
There is an error at time code 10:50. The parent component code I pasted into the diagram doesn't match the binding in that same diagram. The correct parent component code should be:
amount = signal('');
length = computed(() =* this.amount().length);
*This is supposed to be an arrow function by YT doesn't allow angle brackets in the description. 😉
*Links*
KZbin video "Angular's New Signal Inputs": kzbin.info/www/bejne/r5umlpSfjL12Zrc
Code: stackblitz.com/edit/model-input-deborahk
*Content*
00:00 Model input in Angular
00:59 Sample application
02:22 Two-way binding
03:27 Using a model input
05:18 Aliasing a model input
06:08 Required model input
06:56 Reacting to changes: event binding
09:23 Reacting to changes: signals
10:32 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
#angularmodelinput
#modelinputsangular
#angular17.2modelinputs
#angularmodelinputrequired
#angularmodeltutorial
#angularinput
#angularrequiredinput

[@valikonen]

I love Angular and his new vision!

[@deborah_kurata]

Me too! Thanks!

[@atlaslion1746]

You're great Deborah!

[@deborah_kurata]

Thank you so much!

[@ErickCcsVzla]

Excellent video, as usual 🎉 In the minute 10:50, in the parent component's code, "amount" should be "value", for the example to work, I believe. Thank you for the awesome video.

[@deborah_kurata]

Thank you so much. And yep, you are right. The component code doesn't correctly match the HTML binding. But it was supposed to be the other way around (so as not to be confused with the 'value' from the child). "value" in the component code was supposed to be "amount". amount = signal(''); length = computed(() => this.amount().length); Bummer that there is no easy way to update a posted video! (I will add it to the video notes.) Thanks again! Deborah

[@noelfrancisco5778]

Thank you so much for sharing. I love your approach, simple and effective :)

[@deborah_kurata]

That is kind of you to say. Thank you!

[@marcosjrs]

Thank you so much for another fantastic video, Deborah

[@deborah_kurata]

Thanks! 😊

[@cathyf5449]

Great video Deborah. Clear and easy to understand.

[@deborah_kurata]

Thank you so much! 😊

[@Nabulio85]

Great video, beautiful pedagogy. Thx from France. 🙏🏻

[@deborah_kurata]

Thank you! 😊

[@DodgyDev182]

Thank you for the video!

[@deborah_kurata]

😊

[@Erril-1]

Amazing! Thanks! :)

[@deborah_kurata]

Thank you! 😊

[@Robd515]

Thank you very much Deborah :)

[@deborah_kurata]

😊

[@changcnchang8174]

great job ❤

[@deborah_kurata]

Thank you! 😄

[@Brendan2Alexander]

Very nice thank u!

[@deborah_kurata]

😊

[@miloszivkovic6607]

Love you!

[@deborah_kurata]

😊

[@renrenklein_th]

Clear and easy to follow as always ^_^ Since your great at explaining these in detail I feel a video where you show how you can use signals to manipulate populated data in like a grid from and API endpoint might make for an interesting video. Just how the whole setup, kind of pieces all the recent videos together would show how to communicate from parent to child and use signals to manipulate data after it is populated from an endpoint. But regardless I find your videos very informative and great to link to my juniors etc that are learning angular. And are always good review material for myself especially with the newer things like Angulars New Control Flow.

[@deborah_kurata]

Thank you for the kind words and for the suggestion!

[@codeSurvivor]

Nice video, very well explained, thanks! I've never liked the two way data binding, for me it seems as an anti pattern that a child component class can modify the parent component class properties. I prefer using an output event and let the parent modify anything that belongs to itself, making it explicit. ..

[@vutruong4164]

I understand the sentiment. But 2-way binding is just another tool, if you use it in correct situations, like Form building, it can literally saves you a ton of code. At the end of the day, the outcome is the same, isn't it. The data on parent is being edited, either if you use 2-way binding like Angular, or you pass a callback fn that edit the "parent's data" to the child like the React's way.

[@codeSurvivor]

@@vutruong4164 In my case it makes a big difference, and that's because I work with a team of front-end developers, some of them with not a very good understanding of programming principles. So this kind of things that don't follow, e.g., SOLID principles, open doors for coding practices that spread like viruses in our projects... Of course, if they become better then, they'll know when to use stuff like this or not, and why, but that takes time...and viruses spread really fast ;-)

[@OCEMTechZone]

Great 🎉

[@deborah_kurata]

Thanks! 😊

[@alexle7895]

I am a visual learner and your presentation is extremely intuitive. I like it when you show "before" and "after" visually. I assume this approach may not work if I want to write a reactive programming, correct? I am still learning about Angular Signals.

[@deborah_kurata]

Glad it was helpful! To answer your question, it depends on what you are reacting to. The techniques shown in this video are helpful when the parent component needs to react to changes made in the child component. The user types a filter into the child component textbox and the parent component can react to that change, displaying the length of the filter string or passing the result to another child component.

[@Jose-ru2wf]

I think the video should cover how to implement multiple outputs. For example, a todo item with 3 outputs for edit, delete, and change status. Should each one be a separate model() with its corresponding [(thingy)]; or should it be a single "state" object like in React?

[@mohamedhedibasly8752]

Hello Deborah Kurata, Thank you so much for your tutorials, they are very effective and impressive. I have a question: if I have a list of products and I want to view the details of a product in a separate component using the routing "/product/1", and I used a signal to get the details of the selected product, but I have a problem: when I refresh the page, I lose the data, which is a normal behavior. Can you help me solve this problem without exposing the observable to the component (meaning I want my signal to be filled from an HTTP call when refreshing the page).

[@igorr4682]

This used to be possible by adding Change to the output parameter name something like that @Output() childDataChange = new EventEmitter(); and using banana in the box syntax in the component

[@deborah_kurata]

Yep! (I cover that in the video. 😊) But with model inputs, it's one line of code to create the model input ... no need to create the @Input, @Output and do the emit.

[@GustavoAranhaReis]

Great video! Applying this solution of signals two way binding here. It is working fine, but my IDE (IntelliJ) is show error in the html on the [(modelVariable)] at the parent. The error is: "Can't bind to [(modelVariable)] since it is not provided by any applicable directives". Do you have any ideas how to fix it?

[@deborah_kurata]

Thank you. Regarding your IDE, it looks like jetbrains said they fixed it: youtrack.jetbrains.com/issue/WEB-65415/Angular-17.2-model-input-support#:~:text=WEB%2D66429,on%20top%20of%20general%20support: Do you have the latest update of IntelliJ?

[@GustavoAranhaReis]

I'll update it! Thanks a lot

[@makoswebdev7382]

Deb ♥rah!!

[@deborah_kurata]

😊

[@makoswebdev7382]

Deborah the video is great but just a note here. You are referring to the relation between app-filter and app-snack-list as a parent-child relationship. Hmm... I would say that they are siblings. The parent child relationship is between app-snack and app-filter. the same goes for app-snack and app-snack-list. So the examples here are more about how two-way communication can be helpful between sibling components being under the same parent (umbrella) . My 2 cents

[@deborah_kurata]

Thank you! You are correct that the parent-child relationship is between app-snack and app-filter. That is the relationship I'm talking about. The techniques I presented only work between the parent (app-snack) and the child (app-filter). The fact that I'm also passing the value onto the other child component is basically irrelevant to the topic. I considered removing the second child component (app-snack-list) from this demo to prevent confusion, maybe even moving that code into the parent component. But I thought that would be confusing for anyone who watched both videos. I apologize for this confusion. Would it help if I did a second stackblitz showing the techniques without the second child?

[@makoswebdev7382]

@@deborah_kurata no worries, I tried and implemented by myself all the example you mentioned in the video just to have a more clear view and I think I got it now . Thank you for your help :) 😊

[@SuperMukama]

When do you drop the update getting Started With Angular ?

[@deborah_kurata]

Are you asking why I have not updated my "Angular: Getting Started" course on Pluralsight? It's because Pluralsight won't allow it. I'd asked numerous times over the past almost two years and they've said no. Since they have an "Angular Fundamentals" course, they don't think that they also need an "Angular: Getting Started". I'm considering redoing the course for KZbin (I can't just repost the original course because Pluralsight owns it.)

[@SuperMukama]

@@deborah_kurata That is sad. I hope you will work things out.

[@anutaNYC]

How to do this in reactive form input?

[@deborah_kurata]

My understanding is that the Angular team is still working on signal-based forms. So hopefully some time soon?

Hi Deborah, I used your courses to training new junior devs when they start onboard period, but now yours introductory courses are removed from Pluralsight, where I can found this type of courses made by you?

[@deborah_kurata]

Thank you for asking! The Pluralsight courses weren't removed, just retired. You can still find them with the links here: app.pluralsight.com/profile/author/deborah-kurata Pluralsight won't allow me to update the "Getting Started" saying that it wasn't needed since they have an "Angular Fundamentals" in their library. I have done a new RxJS course for Pluralsight. I'm considering redoing my "Getting Started" course here on KZbin, but I haven't finalized a plan as of yet.

@@deborah_kurata Thanks @deborah_kurata Considering redoing that on platform that we can buy your course, on Udemy for example.

[@deborah_kurata]

@ I was never able to get passed their automated verification system and I couldn't find a person to talk to about it. So I can't post to Udemy. Do you think posting the course here on KZbin would be useful?

[@Robd515]

Hi Deborah, big fan here. It would be useful for sure, but also make sure you’re getting compensated for the in depth courses. So KZbin may not pay off. Consider creating your own website to sell your videos. All in all, we just want you to be motivated to keep it up :)

[@albertkao5964]

@@deborah_kurata posting the course here on KZbin would be useful!

[@havefun5519]

Game changes.