Watch Angular Models Video Tutorials & Courses

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": https://youtu.be/yjCeaiWXC0U Code: https://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 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: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ View my YouTube content: https://www.youtube.com/@deborah_kurata ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #bestpractices #angulartutorial #angularparentchild #componentcommunicationinAngular #angularcomponentcommunication #angularmodelinput #modelinputsangular #angular17.2modelinputs #angularmodelinputrequired #angularmodeltutorial #angularinput #angularrequiredinput Key Highlights & Overview: Mastering <strong>Angular Models</strong> requires clear step-by-step guidance and practical hands-on visual demonstrations. Follow along with top-rated video tutorials from industry experts today on <strong>TutorTube</strong>.