3.1 Reusability

Hi, folks, in this lesson, we're going to see how we can ensure our components are reusable and that more than one can be used on a single page. There are a couple of changes that we need to make to the example app to get it working and to ensure that it's properly reusable. So first of all, the modal should just be a wrapper that we can use to display any content inside a modal rather than having it contained so much fixed markup. Let's move the form out of the modal and into the custom element for the component in app.html. And let's also update the title while we're here to Save note instead of Test title. In the configuration for our component, we also need to enable transclusion with the transclude option. Transclusion means that all of the elements inside the custom elements will be copied into the template. We just need to specify where in the template they should be inserted. Back in templates/modal.html, we can use the ng-transclude directive to specify a transclusion slot. Angular would take care of copying the content to the right place in the template for us. This works in exactly the same way as transclusion works with directives. And if necessary, we can use a more complex form of transclusion, where we have multiple bits of content being copied into multiple named transclusion slots. If we run the example in a browser now, we should find that everything is now working as it should. We can create a new note, save the note and the new note should appear in the sidebar. So we're seeing a script error that we can't read the property focus of null. So the problem here is that we're binding to the showmodal event twice, and we just need to update the second one to be hidemodal and not showmodal. It looks like a copy-paste error from the last lesson, I do apologize for that. So now we see the dialogue as expected. And let's add a name for our new note. And we see that everything is working as it should. So the next step is to add another modal to the app.html page. We can add a confirmation modal for the delete note function to make sure that the user really does want to delete the note. So let's go back and refresh the page in the browser quickly. If we repeat the process of adding and saving a new note, we'll see a slight problem. We're actually seeing both the modals displayed at the same time, and that's why the overlay looks much darker this time than it did previously. And we can see that underneath the Confirm modal is our Save Note modal which we were expecting. The reason for this is because both instances of the modal are binding to the showmodal and hidemodal events. What we need to do is add some way to differentiate between the two modals. We can add a modal ID attribute to the custom element. So we've added data-modal-id attributes to both of our modals. And now, back in the component file, we need to add a binding for this attribute to our configuration. This should go in the bindings object. This binding is not optional so we don't use the question mark, but we still use an @binding as we did before. In our event handlers, we can expect a data object to be passed, which contains the ID of the modal that should be opened or closed. Event handlers are always passed and event objects as the first argument so the data object should be the second argument. We can then pass through the ID of the modal we want to open whenever we broadcast the showmodal event, and that happens in controllers/notes.js. So instead of just triggering the event, we now need to pass through a data object, which specifies the ID of the modal that we'd like to show. So the modal that we want to show in this case is the Save modal. So let's go back to the page and refresh it now. And let's create another new note. And now we only see the Save modal as we expect. We don't really need to add this ID check to the hideModal event handler because now only one modal will be shown at a time. So only the current modal, whichever modal that happens to be, needs to worry about being closed. So we also need to specify that we want to see the Confirm modal when deleting a note. So back in the notes controller, let's add a new preDelete method to the controller. And we'll do that just before the deleteNote method. And we just want to broadcast the showmodal event here, but this time, specify confirm_delete as the modal ID that we want to show. All we need to do now is change the Delete button in app.html to invoke the preDeleteNote method when it is clicked instead of deleteNote. We don't need to pass an event object through so let's just get rid of that as well. So let's go back to the browser once again. And now when we select a note and hit the Delete note button, we're expecting to see our Confirm modal. The modal doesn't have any way to confirm or deny the deletion at this point. We'll come back and wire this up in the next lesson. So, in this lesson, we saw how to ensure our component is reusable by making the template function a simple wrapper and using transclusion to copy content into the component. We also saw that we need to add some way to differentiate between different instances of the component if we want to be able have more than one of a single instance of it on the page. We handled that in this case using a simple ID attribute that is passed to the component as an input. Thanks for watching.