1
00:00:00,180 --> 00:00:07,080
In this lecture, we are going to pass on data from the manage component to the edit component inputs

2
00:00:07,080 --> 00:00:10,020
are going to help us accomplish passing on data.

3
00:00:10,350 --> 00:00:16,650
First, we need to store the clip the user has selected by keeping track of the current clip.

4
00:00:16,830 --> 00:00:19,050
We can update the form accordingly.

5
00:00:19,320 --> 00:00:22,290
We will store this data in the manage component.

6
00:00:22,560 --> 00:00:24,060
Open it in your editor.

7
00:00:26,560 --> 00:00:31,270
Below the clip, property defined another property called Active Clip.

8
00:00:33,790 --> 00:00:36,820
The type for this property will be a union type.

9
00:00:37,120 --> 00:00:40,960
The property can either be and I clip, object or null.

10
00:00:43,440 --> 00:00:47,280
By default, the object will have an initial value of no.

11
00:00:49,700 --> 00:00:54,050
Next, this property should be updated when the edit button is clicked.

12
00:00:54,350 --> 00:01:00,080
In the previous lecture, we passed on the clip object onto the open modal function.

13
00:01:00,470 --> 00:01:07,040
We can update the active clip property from this function before opening the modal set, the active

14
00:01:07,040 --> 00:01:09,590
clip property to the clip object.

15
00:01:12,110 --> 00:01:17,960
It's time to pass down the data to the edit component, open the manage template file.

16
00:01:20,460 --> 00:01:27,060
At the bottom of the template, let's bind a property called Active Clip to the active clip property.

17
00:01:30,020 --> 00:01:33,740
We're using the same name for consistency at the moment.

18
00:01:33,890 --> 00:01:38,960
The added component will not accept their data because we haven't added an input for it.

19
00:01:39,320 --> 00:01:40,400
Let's add one.

20
00:01:40,730 --> 00:01:43,400
Open the edit component class file.

21
00:01:46,030 --> 00:01:51,190
We should import the input decorator from the angular slash core package.

22
00:01:53,640 --> 00:01:59,190
Also, the I clip interface should be imported for setting the type of input.

23
00:02:01,820 --> 00:02:08,150
In our class, we're going to accept the data by adding a property called Active Cliff with an initial

24
00:02:08,150 --> 00:02:13,010
value of know, it's the same name we used in the managed templates.

25
00:02:15,580 --> 00:02:19,030
This property will be annotated with these same types.

26
00:02:21,520 --> 00:02:28,420
The main difference between the two is that an input will set this property, apply the input decorator

27
00:02:28,420 --> 00:02:29,560
to this property.

28
00:02:32,130 --> 00:02:35,430
Let's give our component a test in the browser.

29
00:02:35,550 --> 00:02:38,760
Try refreshing the page with the developer tools.

30
00:02:41,310 --> 00:02:45,360
Under the angular panel, search for the app edit component.

31
00:02:47,810 --> 00:02:55,160
Initially, the active clip properties should be set to no, we haven't selected a clip to edit, click

32
00:02:55,160 --> 00:03:02,600
on any of the edit buttons in our list of clips as you do so, the active clip property will be updated

33
00:03:02,600 --> 00:03:03,590
with the object.

34
00:03:03,920 --> 00:03:07,760
You may not see it right away because the developer tools are buggy.

35
00:03:08,090 --> 00:03:15,440
You may need to select another component and switch back to view the changes after confirming the changes.

36
00:03:15,590 --> 00:03:18,020
We can move on to finalizing the form.

37
00:03:18,380 --> 00:03:23,150
The form needs to be updated with the values from the active clip object.

38
00:03:23,450 --> 00:03:26,540
We'll handle this process in the next lecture.