In this video we'll connect the form's submit event to a method on our component which will send the data to the server.
So far, our comment form shares data between the component and 0:00 the input fields. 0:03 Now we need to post the data to the server. 0:05 Reset the form and add the new comments to the specific entries comments. 0:07 The form has a submit event. 0:12 That occurs when the button is clicked. 0:14 Binding to the submit event is the simplest way to handle form submissions 0:17 in Angular. 0:21 When we bind to the submit event, we need to handle a method on the component 0:21 that will process the form and submit the data. 0:27 To start, open up the entry comment form component.ts 0:29 file if it's not open already. 0:34 Add a new method called onSubmi. 0:39 Then place debugger statement in the body. 0:45 Putting the debugger statement in the onSubmit method 0:48 will cause Chrome developer tools to break on that line. 0:51 This will be our indicator that the submit event binding is working. 0:55 Now open up the entry-comment-form.component.html file. 0:59 In the form element, we're going to add the submit event binding. 1:03 Event bindings are indicated by adding a property 1:07 with the event name wrapped in parentheses. 1:11 And the handler expression goes on the right hand side of the equal sign. 1:13 Event bindings are a type of one way data binding 1:17 that are triggered when a given event occurs. 1:20 When the event occurs, it executes the expression on the right. 1:23 Now when we click on the submit button or 1:26 press the Enter key from one of the fields, 1:29 it should trigger the submit event and the debugger should be triggered. 1:31 Let's try it out In 1:35 the name field I'll type Andrew [BLANK AUDIO] If I click the button 1:40 while I have the Chrome developer tools open I'll hit the break point. 1:45 Great, with the execution pause that's how break point I'll check and 1:51 see that I can access the component properties. 1:55 In the Chrome developer tools I can press the escape key 1:58 to toggle the onscreen console. 2:02 In the console I can type this.name. 2:04 When typing this.name in the console I can see that I have the correct value. 2:08 Perfect. 2:13 i'll let this play through. 2:14 Right now our comment form component doesn't know 2:15 anything about the existing components or the entry. 2:18 Because we're using a mock back end we're limited on how we pose this data 2:21 to the server. 2:25 Our mock back end will accept any post we give it. 2:26 We won't be able to retrieve the data after posting it, but that's okay for 2:29 our purpose. 2:33 We just want to know that the post occurred and then we can tell the entry 2:34 about the new comment so it can be added to the list and it's updated the screen. 2:38 We just want to know that the post occurred. 2:43 And then tell the entry about the new comment so the list can be updated. 2:45 To start, let's open up the entry.component.ts file. 2:50 We can add a method for when a comment is added, so 2:57 that we can update the list of comments for that entry. 3:00 We'll call the method onCommentAdded. 3:04 And it will take a comment as a parameter. 3:13 All we need to do is push the comment on to the existing comments. 3:17 We can set the type definition of the comment to be an object with a name, 3:30 and comment key of strings. 3:39 This is known as an inline definition. 3:44 The EntryCommentFormComponent ts file will need to omit 3:55 an event which will trigger this On CommentAdded method. 4:00 We first need to import the EventEmitter from angular core. 4:09 The EventEmitter is a way to pass data between components. 4:15 One component sends the data, while the other component receives it. 4:20 To set up the EventEmitter, We'll add a property on our form component. 4:25 We don't need to name it the same as the other method but 4:31 it's common practice to keep the names the same so it's easy to identify. 4:35 The event emitter. 4:45 Uses the generic to define types. 4:47 Remember a dynamic type definition takes another type definition and 4:49 applies some additional properties or type definitions. 4:53 Again I've included informational on two notes in the teacher's note. 4:57 In our case, the all comments added in event meter will emit a comment, so 5:00 we can inline the definition here. 5:05 Now let's change our onSubmit method so it meets the event. 5:08 [SOUND] First, 5:12 we'll create 5:17 the comments, 5:23 [SOUND] And then we'll emit it. 5:29 Now when the submit button is clicked, 5:39 the OnCommentAdded event emitter will emit a comment. 5:42 Let us try this out in the browser. 5:47 I'll add a comment, click Submit, and nothing happened. 5:56 The entry component and 6:00 the comment form component aren't communicating with each other yet. 6:02 It's important to note that Angular's eventometer is a global event, 6:06 like you would attach to a document. 6:11 These are explicitly used to communicate between components and directives. 6:12 To connect the entry component to the comment form component we need to add 6:17 event bindings to the app entry comment form The left hand side in parenthesis, 6:23 is the event omitted from the app entry comment form. 6:28 The right side is the method to push the comments onto the existing array. 6:38 The dollar sign event Is the value emitted by the child event emitter. 6:43 There's one more step to get the comment added to the list. 6:49 In the entry comment form component .ts file, 6:52 we need to import the output decorator. 6:56 This decorator lets us send data out to the parent via the event emitter. 6:59 Now we can tack the on comment added event emitter. 7:04 Things should start to work now. 7:08 All right let's check it out in the browser. 7:10 Great I can leave a comment and the array of comments gets updated. 7:23 However, the form is still populated with information. 7:31 We need to reset the form and we'll do that next. 7:35
You need to sign up for Treehouse in order to download course files.Sign up