1
00:00:00,150 --> 00:00:06,750
In this lecture, we're going to create a forum for editing a song, adding data to a database is not

2
00:00:06,750 --> 00:00:10,260
the only action users will want to perform in your app.

3
00:00:10,800 --> 00:00:14,010
They may wish to edit or delete a clip from their account.

4
00:00:14,310 --> 00:00:16,410
We should give them the option to do so.

5
00:00:16,650 --> 00:00:19,830
We'll start with adding a form for editing a clip.

6
00:00:20,430 --> 00:00:27,750
By default, we're going to hide the form from the user on the Manage page below the title of a clip.

7
00:00:27,990 --> 00:00:31,620
There is a button for initiating the action of editing a clip.

8
00:00:31,980 --> 00:00:35,010
We're going to listen for a click event on this button.

9
00:00:35,340 --> 00:00:41,490
If the event gets emitted, we're going to render a the bimodal will contain the form for editing a

10
00:00:41,490 --> 00:00:41,910
clip.

11
00:00:42,210 --> 00:00:43,380
Let's get started.

12
00:00:45,850 --> 00:00:52,450
First, we need to create a component for the model we can write the logic for the model in the manage

13
00:00:52,450 --> 00:00:55,120
component for organization reasons.

14
00:00:55,300 --> 00:01:01,390
We're going to write the logic in a separate component and the command line run the following command

15
00:01:02,290 --> 00:01:06,220
and g component video slash edit.

16
00:01:08,710 --> 00:01:11,650
Next, open the managed template file.

17
00:01:14,050 --> 00:01:16,240
I prepared the UI for the model.

18
00:01:16,420 --> 00:01:23,110
The email was readily available in this template, we copied it over when we created the manage component

19
00:01:23,440 --> 00:01:25,030
at the bottom of the template.

20
00:01:25,210 --> 00:01:28,990
There's a comment that says Edit mode all below this comment.

21
00:01:29,050 --> 00:01:31,600
We're going to copy the entire div tag.

22
00:01:34,020 --> 00:01:36,990
Afterward, open the edit template file.

23
00:01:39,510 --> 00:01:42,340
Replace the template with the template for the model.

24
00:01:44,760 --> 00:01:47,730
The next step is to make the component functional.

25
00:01:47,970 --> 00:01:53,160
Luckily, we've taken the time to design a modal component to meet all our needs.

26
00:01:53,430 --> 00:01:55,050
It's completely reusable.

27
00:01:55,320 --> 00:02:00,720
We can skip most of the steps for creating a model by reusing our modal components.

28
00:02:01,080 --> 00:02:05,820
The div tag surrounding the form can be replaced with the app modal component.

29
00:02:08,370 --> 00:02:13,110
As a reminder, the moral component will project content passed into it.

30
00:02:13,470 --> 00:02:17,730
Next, we need to add the modal ID property to the component.

31
00:02:18,060 --> 00:02:21,240
The ID for the modal will be called Edit Clip.

32
00:02:23,900 --> 00:02:28,130
Our model uses an ID system for identifying different models.

33
00:02:28,430 --> 00:02:32,870
Every model should have a unique ID along with passing in an ID.

34
00:02:33,320 --> 00:02:35,420
We need to register our models.

35
00:02:35,660 --> 00:02:40,310
We will register this model from the Edit Component Class file.

36
00:02:42,790 --> 00:02:46,090
At the top of the file import, the modal service.

37
00:02:48,500 --> 00:02:51,860
Next, inject this service into the component.

38
00:02:54,490 --> 00:03:01,240
Registering a model should occur when the component is initialized in the kng on an ID function.

39
00:03:01,420 --> 00:03:07,120
Run the this model dot register function with the ID of Edit clip.

40
00:03:09,750 --> 00:03:16,020
The model should be unregistered when the component gets destroyed, otherwise we will have a memory

41
00:03:16,020 --> 00:03:17,130
leak on our hands.

42
00:03:17,370 --> 00:03:24,930
We should import the on destroy interface for type checking at the top of the file import the on destroy

43
00:03:24,930 --> 00:03:28,200
interface from the angular slash core package.

44
00:03:30,620 --> 00:03:34,070
Next, we'll implement this interface on our class.

45
00:03:36,480 --> 00:03:43,070
Lastly, let's define the energy and destroy method to satisfy the TypeScript compiler.

46
00:03:45,620 --> 00:03:52,370
Inside this method, we can unregister immortal by calling the unregister function with the idea of

47
00:03:52,370 --> 00:03:53,000
the modal.

48
00:03:55,440 --> 00:04:01,530
We're almost finished, the immortal is ready, the last step is to load this model on our page.

49
00:04:01,740 --> 00:04:04,320
Switch back to the manage template file.

50
00:04:04,590 --> 00:04:08,580
At the bottom of the templates, we will load the app edit component.

51
00:04:11,090 --> 00:04:13,910
We are not going to add the model inside the loop.

52
00:04:14,160 --> 00:04:20,570
Instead, we're going to work with a single model when the user clicks on the edit button, the form

53
00:04:20,570 --> 00:04:25,070
in the model will be updated to contain the values from a specific clip.

54
00:04:25,490 --> 00:04:28,820
The data for the clip will be sent over to the model.

55
00:04:29,120 --> 00:04:31,370
Let me show you how that would be done.

56
00:04:32,090 --> 00:04:35,270
Scroll to the loop and our template in the loop.

57
00:04:35,360 --> 00:04:36,710
Search for the buttons.

58
00:04:36,980 --> 00:04:40,280
They can be found under a comment that says actions.

59
00:04:42,740 --> 00:04:46,990
On the first anchor element, we're going to listen for the click event.

60
00:04:50,640 --> 00:04:55,080
If this event gets emitted will run a function called open mode all.

61
00:04:57,530 --> 00:05:03,770
This function will have two arguments will pass on the event object and clip object.

62
00:05:06,320 --> 00:05:10,430
We're passing on the event object to prevent the default behavior.

63
00:05:10,700 --> 00:05:15,320
As for the clip, object will use this object to update the form.

64
00:05:15,620 --> 00:05:19,460
Let's define this method in the Manage Component Class file.

65
00:05:19,790 --> 00:05:21,650
Open this file in your editor.

66
00:05:24,090 --> 00:05:27,990
At the top of the file, we're going to import immoral service.

67
00:05:30,330 --> 00:05:36,900
We're importing best service because it has the method for toggling the visibility of the model since

68
00:05:36,900 --> 00:05:40,230
it's a service, we can inject it into our components.

69
00:05:42,720 --> 00:05:46,920
We can move on to defining the function at the bottom of the class.

70
00:05:47,070 --> 00:05:51,620
Define the open modal function with the arguments we added in the templates.

71
00:05:51,990 --> 00:05:55,800
The event argument will be annotated with the event type.

72
00:05:56,130 --> 00:06:00,900
As for the clip argument, it'll be annotated with the I clip model.

73
00:06:03,400 --> 00:06:09,610
Inside this method, we can prevent the default behavior by calling the prevent default method with

74
00:06:09,610 --> 00:06:11,050
the event object.

75
00:06:13,580 --> 00:06:19,250
Next, we can toggle the model with the biscuit Model X toggle mode or function.

76
00:06:19,700 --> 00:06:22,670
This function requires the ID of the model.

77
00:06:22,880 --> 00:06:26,390
We assign the model with the ID of Edit Clip.

78
00:06:28,960 --> 00:06:29,800
We're finished.

79
00:06:29,950 --> 00:06:31,330
Let's test our app.

80
00:06:33,900 --> 00:06:38,520
On the Manage page, we can click on the edit buttons to open the model.

81
00:06:38,880 --> 00:06:43,920
The model can be closed by clicking outside of the model or on the closed button.

82
00:06:44,370 --> 00:06:44,820
Great.

83
00:06:45,000 --> 00:06:48,420
We've successfully created a model for editing a song.

84
00:06:48,720 --> 00:06:54,450
Unlike before, it didn't take several lectures by designing a reusable model.

85
00:06:54,540 --> 00:06:58,020
We were able to add a model to our app within minutes.

86
00:06:58,500 --> 00:07:03,270
In the next lecture, we're going to begin validating the form before submission.

87
00:07:03,510 --> 00:07:04,590
I'll see you there.