In this lecture, we are going to pass on data from the manage component to the edit component inputs
are going to help us accomplish passing on data.
First, we need to store the clip the user has selected by keeping track of the current clip.
We can update the form accordingly.
We will store this data in the manage component.
Open it in your editor.
Below the clip, property defined another property called Active Clip.
The type for this property will be a union type.
The property can either be and I clip, object or null.
By default, the object will have an initial value of no.
Next, this property should be updated when the edit button is clicked.
In the previous lecture, we passed on the clip object onto the open modal function.
We can update the active clip property from this function before opening the modal set, the active
clip property to the clip object.
It's time to pass down the data to the edit component, open the manage template file.
At the bottom of the template, let's bind a property called Active Clip to the active clip property.
We're using the same name for consistency at the moment.
The added component will not accept their data because we haven't added an input for it.
Let's add one.
Open the edit component class file.
We should import the input decorator from the angular slash core package.
Also, the I clip interface should be imported for setting the type of input.
In our class, we're going to accept the data by adding a property called Active Cliff with an initial
value of know, it's the same name we used in the managed templates.
This property will be annotated with these same types.
The main difference between the two is that an input will set this property, apply the input decorator
to this property.
Let's give our component a test in the browser.
Try refreshing the page with the developer tools.
Under the angular panel, search for the app edit component.
Initially, the active clip properties should be set to no, we haven't selected a clip to edit, click
on any of the edit buttons in our list of clips as you do so, the active clip property will be updated
with the object.
You may not see it right away because the developer tools are buggy.
You may need to select another component and switch back to view the changes after confirming the changes.
We can move on to finalizing the form.
The form needs to be updated with the values from the active clip object.
We'll handle this process in the next lecture.