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

Опубликовано: 23 Апрель 2024
на канале: Deborah Kurata

9,874

602

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
YouTube video "Angular's New Signal Inputs":    • Angular's New Signal Inputs

Code: https://stackblitz.com/edit/model-inp...

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 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
#angularmodelinput
#modelinputsangular
#angular17.2modelinputs
#angularmodelinputrequired
#angularmodeltutorial
#angularinput
#angularrequiredinput