This course will be retired on April 12, 2021.
In the previous video we added input fields to our form. In this video we'll connect the input fields to the component values by using NgModel. NgModel is how Angular shares data between the template and the component.
Note: Once you have installed Augury, restart your browser to access Augury functionality.
In this video, we'll be connecting the comment form's input elements 0:00 to the values in the component. 0:04 To accomplish this, we'll be using the NgModel directive, 0:05 which is installed with the forms module. 0:11 NgModel creates a link between the form input and 0:14 the associative property on the component. 0:18 In addition, it sets up change cracking and validation, 0:21 which we'll touch on later in the course. 0:24 The link between the form input and 0:27 the associative property on the component is known as two way data binding. 0:29 To illustrate what two way data binding looks like, if we visit google.com and 0:34 type in 1 usd and hit Enter, a form appears with two currencies. 0:40 I can change the value of the form for the dollar. 0:47 A calculation is made in the component class, and 0:51 it updates the other field showing the conversion. 0:54 I can also update the other currency. 0:58 The calculation in the class is made, and it gives me the dollar amount in the UI. 1:02 Two way data binding is a way of keeping the data in sync, 1:08 no matter where the values are changed. 1:12 With two way data binding, the user can change a value, and the corresponding 1:15 property on the component will be changed to match that new value. 1:19 If the component changes the value of a property, 1:24 the corresponding input will change to match the new value. 1:26 Let's go ahead and wire up our comment inputs. 1:31 Open up EntryCommentForm.Component.ts. 1:34 Add a name property, And a comment property. 1:38 Because we're writing type script, we shout set these to string. 1:50 Next in the EntryCommentFormComponent.html, 1:56 we'll add a link to our properties using the NgModel directive. 2:00 We're going to add a new attribute to the name input. 2:05 Because we're using two way data binding, 2:09 we express it with a set of square brackets and parentheses inside. 2:12 We're going to apply the NgModel directive to this. 2:17 On the right side of the equal sign, 2:20 we enter the name of the property on the component's code. 2:22 In our case, it's name. 2:28 We'll do the same for the textarea. 2:30 Right now, we don't have a way to know if the data on the component 2:41 changes when we change the name or the comment field. 2:45 One way to see two way data binding in action would be to duplicate the fields 2:50 and see if the changes applied to one field gets applied to the other. 2:54 But there's a tool I find useful when working with Angular components. 2:58 It's called Augury. 3:02 Augury is a Chrome Developer Tools extension 3:04 that gives you the insight into what's going on in your application. 3:07 I've included a link to this in the teacher's notes. 3:10 Once you've got Augury installed, you can access Augury by opening up 3:13 the Chrome Developer Tools and then clicking on Augury in the top ribbon. 3:17 When it opens up, I can see all the active components and their children. 3:28 I'll drill down until I get to the EntryCommentFormComponent. 3:33 Clicking on the component reveals the Properties pane on the right. 3:37 Because our comment form component didn't set any natural values, 3:43 the properties, Aren't available. 3:47 We can fix this by assigning empty strings to our component. 3:52 Now when we open up Augury, we'll see the initial value being an empty string. 4:15 If we change the value in Augury, 4:20 we're essentially changing it directly on the component. 4:23 In the name property, I'll write the value test. 4:26 After pressing Enter, the value is set. 4:31 Notice how the value in the input field has changed. 4:34 Now if I change the value in the input field to some 4:38 other test, Augury gets updated too. 4:43 Well then, we're getting close to being able to submit the form and 4:47 add a new comment. 4:50 See you in the next video. 4:52
You need to sign up for Treehouse in order to download course files.Sign up