3.2 Component Outputs

Hi folks. In this lesson we're going to see how we can specify outputs for our components. Throughout the course we've seen how we can use a bindings object inside the component configuration to define the inputs for a component which come from attributes on the component's custom element. We can also use this bindings object to specify the outputs for a component as well. A component should control its own data, but it shouldn't alter data that doesn't belong to it. What it should do instead is output the data for something else to handle. In the last lesson, we added a confirm modal in order to demonstrate that we can have two different instances on the same page. Let's now wire this up as a built-in type of modal that can be created which outputs the result of the confirmation. So first of all in app.html, let's add a new attribute to the confirm modal. So we specified a new attribute called data-modal-type. And we've set that to the type prompt, which will be a built-in type which our modal component can create automatically. We can now add this as an input to the component in components/modal.js. The modal type is added as an optional string binding. All we need to do now is add a new section of markup to the modal.html template which can be rendered depending on the value of the modal type binding that we've just added. We use an ng-if conditional based on whether the modal type property of the model is equal to prompt. So let's run the app in our browser now. I've just noticed a typo, let's fix that quickly before we run the example. Otherwise it will break, And now let's run the app. So if we try to delete a note, we should see our new prompt form. So now we need to specify the output from the component back in modal.js. As I mentioned before, we also do this using the bindings object. We've specified that the component will output something using an on confirm callback which is denoted with the ampersand character as the binding value. Now we can use the ng-click directive on our buttons back in modal.HTML to invoke the on confirm callback. We just invoke the method as if we had set it as a property on the component scope. But note that we have to pass an object to the method with keys that match the names of the parameters the call back will receive. Now in the custom elements of the confirm modal back in the main App.HTML page, we can specify a method to handle the unconfirm output. We can specify a method in the notes controller in controller/notes.js to handle the confirmation and receive the response arguments which matches the key in the objects we passed from the modal template. Lastly, then let's add this method to the notes.js controller. If the response is true, the OK button in the modal was clicked, so we can go ahead and invoke the delete_note method, which was previously bound to the delete button. If the cancel button is clicked, this won't happen. But in either case, the hide modal event is used to hide the modal. So let's go back to the browser now and just confirm that the confirm modal is fully working as expected. If we choose cancel, the note should remain, but the modal should be closed. And now let's go ahead and actually delete it. So in this lesson we saw how we can specify outputs for our components, and as we've learned, Angular provides an elegant way for us to allow callback functions to be specified in the code using the component by setting an attribute on the component's custom element. Elements inside the component can then invoke these call backs passing arbitrary data. This behavior is enabled using the ampersand in our component's binding configuration. Thanks for watching.