1
00:00:00,090 --> 00:00:06,600
In this lecture, we are going to destroy the model after a successful form submission, after submitting

2
00:00:06,600 --> 00:00:09,210
either the log in or registration form.

3
00:00:09,330 --> 00:00:12,960
The model doesn't close if either forms were a success.

4
00:00:13,290 --> 00:00:17,320
The user has to manually close the model or refresh the page.

5
00:00:17,610 --> 00:00:20,760
We should hide the model after a successful submission.

6
00:00:21,240 --> 00:00:24,720
Not only should we hide the model, but we should destroy it.

7
00:00:24,990 --> 00:00:27,720
Letting the model hang around is not a good idea.

8
00:00:27,990 --> 00:00:33,570
We are experiencing a memory leak if we let the model exist beyond authentication.

9
00:00:33,900 --> 00:00:36,930
Open the angular developer tools in your browser.

10
00:00:39,470 --> 00:00:45,560
Under the Components tab, the authentication model is listed as an active component in our app.

11
00:00:45,860 --> 00:00:48,500
In addition, we are loading other components.

12
00:00:48,800 --> 00:00:50,540
These are memory leaks as well.

13
00:00:50,810 --> 00:00:55,100
We should completely destroy the model after a successful authentication.

14
00:00:55,370 --> 00:01:01,970
Luckily, we have an observable in our service for informing our components of the user's authentication

15
00:01:01,970 --> 00:01:02,600
status.

16
00:01:03,050 --> 00:01:09,350
Let's import this service into the app component, which is where the authentication model is loaded.

17
00:01:09,710 --> 00:01:12,110
Open the app component class file.

18
00:01:14,480 --> 00:01:18,200
At the top of the file import, the authentication service.

19
00:01:20,610 --> 00:01:25,860
Next, add the constructor function to the app component if it isn't defined.

20
00:01:28,280 --> 00:01:34,700
Inside the constructor functions arguments, we will inject the authentication service as off.

21
00:01:37,280 --> 00:01:39,770
The authentication service should be public.

22
00:01:40,010 --> 00:01:43,220
We need to subscribe to the observable from the template.

23
00:01:43,490 --> 00:01:46,430
Technically, we could subscribe to the class.

24
00:01:46,700 --> 00:01:50,930
However, we learned about the async pipe in an earlier lecture.

25
00:01:51,230 --> 00:01:54,320
Let's subscribe to the observable from the templates.

26
00:01:54,620 --> 00:01:56,540
Open the app template file.

27
00:01:59,000 --> 00:02:04,850
At the bottom of the templates, we are loading the authentication model on this component.

28
00:02:05,000 --> 00:02:07,820
We will apply the NGF Directive.

29
00:02:08,150 --> 00:02:14,240
The value for this directive will be the is authenticated observable with the async pipe.

30
00:02:16,790 --> 00:02:23,660
We want to show the model if the user is not logged in, let's wrap the value with the pair of parentheses

31
00:02:23,660 --> 00:02:25,490
and the negation operator.

32
00:02:28,000 --> 00:02:30,040
Let's give our model a test.

33
00:02:30,220 --> 00:02:34,240
If we did everything right, we shouldn't see the model in the document.

34
00:02:34,450 --> 00:02:36,670
Let's refresh the page in the browser.

35
00:02:38,530 --> 00:02:40,690
I'm still logged into the application.

36
00:02:40,900 --> 00:02:44,650
Despite that, the authentication model is still active.

37
00:02:44,890 --> 00:02:47,230
The problem isn't with our observable.

38
00:02:47,470 --> 00:02:50,650
Otherwise the links wouldn't be functional either.

39
00:02:50,890 --> 00:02:53,470
The links work, but the model is active.

40
00:02:53,710 --> 00:02:59,320
The problem lies with the model to understand why switch over to the elements panel.

41
00:03:01,970 --> 00:03:06,500
Under the body tag, the app modal component appears at the bottom.

42
00:03:06,800 --> 00:03:10,890
It's a child of the body element instead of the app component.

43
00:03:11,210 --> 00:03:17,270
We can verify the structure of the document by selecting the element in the tree at the bottom.

44
00:03:17,390 --> 00:03:20,930
The developer tools show us the hierarchy of elements.

45
00:03:21,440 --> 00:03:27,140
As you can recall, we moved the component from its original location to the root of the document.

46
00:03:27,500 --> 00:03:30,860
This teleportation was to minimize CIUSSS errors.

47
00:03:31,130 --> 00:03:37,190
However, it does introduce some problems in our app if we want to remove the component altogether.

48
00:03:37,400 --> 00:03:39,770
We will need to remove the element manually.

49
00:03:40,400 --> 00:03:44,180
Angular has lost control of the element in our editors.

50
00:03:44,300 --> 00:03:46,790
Open the modal component class file.

51
00:03:49,320 --> 00:03:54,450
The components still gets destroyed, however, it will not be removed from the dam.

52
00:03:54,750 --> 00:04:00,330
If we want to completely remove the element, we need to remove it when the component gets destroyed

53
00:04:00,720 --> 00:04:02,100
at the top of the file.

54
00:04:02,130 --> 00:04:04,830
Let's import the on destroy interface.

55
00:04:07,270 --> 00:04:11,740
Next, we will implement the UN Destroy interface on the class.

56
00:04:14,190 --> 00:04:18,720
Lastly, we will add the energy and destroy method to the class.

57
00:04:21,220 --> 00:04:26,890
Inside this method, we will call the document dump body dump, remove child function.

58
00:04:29,390 --> 00:04:32,570
We can remove elements with the remove child function.

59
00:04:32,900 --> 00:04:36,350
This has one argument, which is the element to remove.

60
00:04:36,710 --> 00:04:42,470
Luckily, we have a reference to the element because we injected the element reference service into

61
00:04:42,470 --> 00:04:43,340
our component.

62
00:04:43,700 --> 00:04:48,260
We can pass in the whisked element that native element property.

63
00:04:50,740 --> 00:04:52,300
Let's give our app a test.

64
00:04:52,600 --> 00:04:57,040
If we refresh the page, the component has been removed from the documents.

65
00:04:57,340 --> 00:05:00,790
We can verify this removal through the developer tools.

66
00:05:01,180 --> 00:05:05,200
It doesn't appear under the elements panel or the angular panel.

67
00:05:07,580 --> 00:05:08,270
Perfect.

68
00:05:08,510 --> 00:05:14,690
Let's make sure the model appears when we're not logged in, we can log out by switching to the application

69
00:05:14,690 --> 00:05:17,110
panel under the storage section.

70
00:05:17,180 --> 00:05:18,860
We can clear these site data.

71
00:05:21,430 --> 00:05:25,450
If we refresh the page, the model will become accessible again.

72
00:05:28,020 --> 00:05:32,550
Let's log in to our app while keeping the angular developer tools open.

73
00:05:38,630 --> 00:05:43,640
The moral component should disappear from the list of components if it doesn't.

74
00:05:43,850 --> 00:05:47,510
You may need to click on the list or reopen the dev tools.

75
00:05:47,750 --> 00:05:49,820
The developer tools are still new.

76
00:05:50,030 --> 00:05:56,750
There are some bugs in it to be completely sure we can switch to the elements panel if the component

77
00:05:56,750 --> 00:05:58,610
is not listed in the document.

78
00:05:58,790 --> 00:06:00,680
The component has been destroyed.

79
00:06:01,280 --> 00:06:01,910
Perfect.

80
00:06:02,120 --> 00:06:06,950
In the next lecture, we're going to make a slight improvement to destroying the model.