In this lecture, we are going to update the list of clips after the user submits the form at the moment.
Form submissions do not cause the title to be updated.
Users may get confused by the lack of updates on this page.
It may lead to duplicate submissions, which can lead to a higher bill by Firebase.
Accomplishing this will require outputs.
We need to create an event from the edit component.
After creating the event will update the manage component to listen for the event from the child component.
The Manage component will use the data emitted by the event to update its data.
Let's give it a try.
Open the Edit Component Class file in your editor.
We're going to need to import two functions.
First, we need to input the output decorator to allow the parent component to listen to an event on
the component in the import list for the angular core package and the output decorator.
Next, we need the event, a middle class to generate a custom event, it can be imported from the same
package.
With these two classes, we can begin emitting data in our class, define a property called update decorated
with the output decorator.
The value for this property will be a new instance of the event emitter class.
After creating the event emitter object, we need to emit an event.
Otherwise, the parent component will listen to an event that never emits values.
We should emit a value in the form.
Submission is a success.
Scroll down to the submit function.
After the try catch block, we will emit an event by calling the emit function.
We have the option of sending a value to the parent component in this case, we're going to send the
active clip property back to the parent component.
The active clip property contains the ID and title of the clip, the parent component is going to need
to know this information when updating the data before we send this object.
We should update the title.
The title in the control gets updated, but not the title.
In the active clip object set, the active clip talked title property to the title value property.
Inside this function, we're going to create a conditional statement for checking if the active clip
property is empty.
If it is, we'll return the function.
It's possible the active clip property may be empty.
Let's move on to accepting this data from the manage component open the Manage template file.
At the bottom of this template, we loaded the app edit component on this component.
We're going to bind the update event to a function called update with the event object passed onto the
function.
The last step is to define this function openly managed component class file.
Defined this method inside the class with the event object accepted as the first argument.
As we learned before, the event, object will not contain the typical event data, the data stored
in this argument will be the data emitted by the child components.
Therefore, we should annotate this property with the AI clip model.
Next, we need to start updating the title the parent component doesn't know which title to update.
There are different ways to inform the parent component of the clip to update.
Theoretically, we could store the index, but I think looping through the array of clips will be easier.
We already have the documented.
We might as well use it inside this function loop through the clips array with the for each function.
We're going to pass in a function to handle each iteration with each iteration.
We're going to accept the elements and index.
Next, inside the function will use a conditional statement to check if the Element Duck ID property
is equal to the event Typekit ID property.
If this condition turns out to be true, we all know which clip to update inside the condition, set
the this dot clips.
I got title property to the event title property.
We're finished.
Let's try testing the form in the browser.
Edit any of the clips.
If we switch back, the changes are reflected in the list, refreshing the page will show that each
update persisted in the database.
You can check the database if you would like further confirmation.
There's just one problem.
Let's quickly edit any of the clips.
Next, I'll switch to another clip.
The alert message displays for the other clips.
It's not desirable behavior.
The end user may get confused.
We should heightened the alert box when the user switches clips.
Let's quickly update the form.
Open the edit component class in your editor.
We're going to toggle the alert component when the energy on changes, life cycle function runs inside
this function.
Set the IND submission and show alert properties to false.
Let's give our app one more test.
Great.
The effect goes away.
I know I flew right by this.
It was a lot of code to hook up the form if you were confused with any part of the process.
I recommend reviewing the last three sections.
A lot of what we did was broken down in those lectures.
The newest thing we learned was how to select an individual document from the collection by using lead
document function.
Firebase will return an object with properties and methods for interacting with the document.
We took advantage of one of the functions for updating the properties in a document.
It isn't important to update every property.
Firebase is flexible in this regard in the next lecture.
We will wrap things up with the Manage page.