In this lecture, we're going to create a forum for editing a song, adding data to a database is not
the only action users will want to perform in your app.
They may wish to edit or delete a clip from their account.
We should give them the option to do so.
We'll start with adding a form for editing a clip.
By default, we're going to hide the form from the user on the Manage page below the title of a clip.
There is a button for initiating the action of editing a clip.
We're going to listen for a click event on this button.
If the event gets emitted, we're going to render a the bimodal will contain the form for editing a
clip.
Let's get started.
First, we need to create a component for the model we can write the logic for the model in the manage
component for organization reasons.
We're going to write the logic in a separate component and the command line run the following command
and g component video slash edit.
Next, open the managed template file.
I prepared the UI for the model.
The email was readily available in this template, we copied it over when we created the manage component
at the bottom of the template.
There's a comment that says Edit mode all below this comment.
We're going to copy the entire div tag.
Afterward, open the edit template file.
Replace the template with the template for the model.
The next step is to make the component functional.
Luckily, we've taken the time to design a modal component to meet all our needs.
It's completely reusable.
We can skip most of the steps for creating a model by reusing our modal components.
The div tag surrounding the form can be replaced with the app modal component.
As a reminder, the moral component will project content passed into it.
Next, we need to add the modal ID property to the component.
The ID for the modal will be called Edit Clip.
Our model uses an ID system for identifying different models.
Every model should have a unique ID along with passing in an ID.
We need to register our models.
We will register this model from the Edit Component Class file.
At the top of the file import, the modal service.
Next, inject this service into the component.
Registering a model should occur when the component is initialized in the kng on an ID function.
Run the this model dot register function with the ID of Edit clip.
The model should be unregistered when the component gets destroyed, otherwise we will have a memory
leak on our hands.
We should import the on destroy interface for type checking at the top of the file import the on destroy
interface from the angular slash core package.
Next, we'll implement this interface on our class.
Lastly, let's define the energy and destroy method to satisfy the TypeScript compiler.
Inside this method, we can unregister immortal by calling the unregister function with the idea of
the modal.
We're almost finished, the immortal is ready, the last step is to load this model on our page.
Switch back to the manage template file.
At the bottom of the templates, we will load the app edit component.
We are not going to add the model inside the loop.
Instead, we're going to work with a single model when the user clicks on the edit button, the form
in the model will be updated to contain the values from a specific clip.
The data for the clip will be sent over to the model.
Let me show you how that would be done.
Scroll to the loop and our template in the loop.
Search for the buttons.
They can be found under a comment that says actions.
On the first anchor element, we're going to listen for the click event.
If this event gets emitted will run a function called open mode all.
This function will have two arguments will pass on the event object and clip object.
We're passing on the event object to prevent the default behavior.
As for the clip, object will use this object to update the form.
Let's define this method in the Manage Component Class file.
Open this file in your editor.
At the top of the file, we're going to import immoral service.
We're importing best service because it has the method for toggling the visibility of the model since
it's a service, we can inject it into our components.
We can move on to defining the function at the bottom of the class.
Define the open modal function with the arguments we added in the templates.
The event argument will be annotated with the event type.
As for the clip argument, it'll be annotated with the I clip model.
Inside this method, we can prevent the default behavior by calling the prevent default method with
the event object.
Next, we can toggle the model with the biscuit Model X toggle mode or function.
This function requires the ID of the model.
We assign the model with the ID of Edit Clip.
We're finished.
Let's test our app.
On the Manage page, we can click on the edit buttons to open the model.
The model can be closed by clicking outside of the model or on the closed button.
Great.
We've successfully created a model for editing a song.
Unlike before, it didn't take several lectures by designing a reusable model.
We were able to add a model to our app within minutes.
In the next lecture, we're going to begin validating the form before submission.
I'll see you there.