1
00:00:04,010 --> 00:00:09,440
Before we get started on Angular template driven forms,

2
00:00:09,440 --> 00:00:15,165
we need to find a way of overlaying content on top of the current web view.

3
00:00:15,165 --> 00:00:21,935
The Bootstrap, we have models that enable us to overlay content on top of the Web page.

4
00:00:21,935 --> 00:00:26,700
With the use of Angular material in our Angular application,

5
00:00:26,700 --> 00:00:29,970
the Angular material provides a component called as

6
00:00:29,970 --> 00:00:32,820
the Angular Dialogue Component which allows you

7
00:00:32,820 --> 00:00:35,865
to overlay content on top of the current view.

8
00:00:35,865 --> 00:00:42,010
Let's look at how we make use of the Dialogue Component in this exercise.

9
00:00:42,080 --> 00:00:45,470
To get started on this exercise,

10
00:00:45,470 --> 00:00:49,580
let's go to our code and we need to find

11
00:00:49,580 --> 00:00:54,230
a way of triggering the application to show the dialogue.

12
00:00:54,230 --> 00:00:58,620
So, to do that, let's add in a button into our tool bar here.

13
00:00:58,620 --> 00:01:01,475
So, going to the toolbar right at the top here,

14
00:01:01,475 --> 00:01:10,790
let me add in a span with the class flex spacer that we

15
00:01:10,790 --> 00:01:18,340
have introduced into our SCSS

16
00:01:18,340 --> 00:01:21,650
file for our application.

17
00:01:21,650 --> 00:01:29,170
So, we had introduced the flexor spacer in the styles.scss file here,

18
00:01:29,170 --> 00:01:30,840
right down below here.

19
00:01:30,840 --> 00:01:34,240
So, that's the class that we're going to use with a span here.

20
00:01:34,240 --> 00:01:37,035
So, when you apply the flexor spacer to the span,

21
00:01:37,035 --> 00:01:40,670
what it does is it provides enough space between

22
00:01:40,670 --> 00:01:45,670
the previous element and the element that follows here.

23
00:01:45,670 --> 00:01:49,280
So, it'll push whatever the element that follows the span to

24
00:01:49,280 --> 00:01:53,030
the rightmost edge of the screen as far as possible.

25
00:01:53,030 --> 00:01:54,985
So, here, after this,

26
00:01:54,985 --> 00:01:57,500
let me add in a button here.

27
00:01:57,500 --> 00:02:02,755
So, this button which when clicked will

28
00:02:02,755 --> 00:02:09,635
invoke a function called openLoginForms.

29
00:02:09,635 --> 00:02:11,660
So, as you realize,

30
00:02:11,660 --> 00:02:17,865
so this is where we're going to be supporting a form for our application.

31
00:02:17,865 --> 00:02:22,475
We'll look at how the form is developed in the next exercise.

32
00:02:22,475 --> 00:02:25,330
Now, for this, let me add in

33
00:02:25,330 --> 00:02:33,120
the corresponding font awesome icons.

34
00:02:33,120 --> 00:02:38,950
So, I'll say fa fa-sign-in,

35
00:02:42,290 --> 00:02:50,010
and also add in fa-lg to that.

36
00:02:50,010 --> 00:02:52,875
So, that will add in a icon,

37
00:02:52,875 --> 00:02:54,645
the sign in icon here,

38
00:02:54,645 --> 00:02:55,880
and then following this,

39
00:02:55,880 --> 00:02:58,690
we will put the word login in there.

40
00:02:58,690 --> 00:03:05,980
So, this will create a button called login in the tool bar

41
00:03:05,980 --> 00:03:14,070
to the right edge of the screen together with the sign in icon there,

42
00:03:14,070 --> 00:03:16,960
which when clicked, will open a login form.

43
00:03:16,960 --> 00:03:22,670
This login form itself will be hosted inside a material dialogue component.

44
00:03:22,670 --> 00:03:26,204
Now, to create a dialogue component, obviously,

45
00:03:26,204 --> 00:03:29,330
we realize that that is going to be a component that

46
00:03:29,330 --> 00:03:32,270
needs to be overlaid on top of the current view there.

47
00:03:32,270 --> 00:03:36,770
So, we need another component to be added to our application.

48
00:03:36,770 --> 00:03:44,095
So, let's go to the terminal and then add in one more component into our application.

49
00:03:44,095 --> 00:03:50,735
Going to the terminal, let me type ng g component login.

50
00:03:50,735 --> 00:03:55,725
So, we added a new component called as the login component to our application.

51
00:03:55,725 --> 00:03:57,725
Once the login component is added,

52
00:03:57,725 --> 00:04:04,490
let's go and configure the login component to be a dialogue component in our application.

53
00:04:04,490 --> 00:04:08,305
So, to do that, let's go back to our code.

54
00:04:08,305 --> 00:04:10,215
Getting back to our code,

55
00:04:10,215 --> 00:04:13,715
we now see that the login component is now open.

56
00:04:13,715 --> 00:04:16,445
Let me open the login component.ts file.

57
00:04:16,445 --> 00:04:18,935
So, configure this as

58
00:04:18,935 --> 00:04:24,485
a dialogue component in Angular application using the material dialogue component.

59
00:04:24,485 --> 00:04:30,385
Let me import MatDialog.

60
00:04:30,385 --> 00:04:32,540
So, this is the component that supports

61
00:04:32,540 --> 00:04:39,480
the dialogue component in Angular material and then also

62
00:04:39,600 --> 00:04:45,545
let me import MatDialogRef and these are imported

63
00:04:45,545 --> 00:04:52,420
from angular material here.

64
00:04:53,140 --> 00:05:03,750
This will enable us to create our component and turn this into a dialogue component.

65
00:05:03,750 --> 00:05:10,030
Now, after this, let's go ahead and then configure our template file here.

66
00:05:10,030 --> 00:05:11,940
So, going to the template file here,

67
00:05:11,940 --> 00:05:16,300
I'm going to create this as saying mat-toolbar.

68
00:05:16,300 --> 00:05:22,330
So, within this dialogue also am going to display a toolbar.

69
00:05:25,350 --> 00:05:34,065
For this toolbar, I will say login right at the top, following that,

70
00:05:34,065 --> 00:05:43,920
we will introduce the flex spacer class

71
00:05:43,920 --> 00:05:49,350
here and then after the flex spacer class,

72
00:05:49,350 --> 00:05:53,169
we will add in a button

73
00:05:54,590 --> 00:06:04,385
with the attributes mat-button mat-dialog-close.

74
00:06:04,385 --> 00:06:09,850
So, this mat-dialog-close is something that the dialogue components supports for us,

75
00:06:09,850 --> 00:06:13,490
this attribute which turns this button into

76
00:06:13,490 --> 00:06:18,255
a button which when clicked will close this dialogue there.

77
00:06:18,255 --> 00:06:26,740
Inside this button, I'm going to use a times in there.

78
00:06:26,740 --> 00:06:30,600
So, that'll display it as a cross on the screen there.

79
00:06:30,600 --> 00:06:33,110
So, that's the button that we will add into the dialogue.

80
00:06:33,110 --> 00:06:38,855
Right now, our dialogue contains only this in its view.

81
00:06:38,855 --> 00:06:44,870
Now, to enable us to include the dialogue component and make use of it,

82
00:06:44,870 --> 00:06:47,350
of course, we need to go to the app module.

83
00:06:47,350 --> 00:06:49,030
In the app module,

84
00:06:49,030 --> 00:06:59,190
we need to import the corresponding module that supports dialogue component.

85
00:06:59,190 --> 00:07:02,765
So, we'll import the MatDialogueModule

86
00:07:02,765 --> 00:07:10,200
from Angular material dialog.

87
00:07:10,200 --> 00:07:20,300
So, this will add in the dialogue module into our application and then as you expect,

88
00:07:20,300 --> 00:07:25,070
they will have to go down here into the imports and then import

89
00:07:25,070 --> 00:07:30,515
that dialog module into our application.

90
00:07:30,515 --> 00:07:32,735
Not only this, now,

91
00:07:32,735 --> 00:07:38,575
in order to turn a Angular component into a dialog component,

92
00:07:38,575 --> 00:07:44,330
we also need to declare that component as an entry component.

93
00:07:44,330 --> 00:07:49,310
Now, recall that we added in the login component to our application and so

94
00:07:49,310 --> 00:07:51,920
this login component is already added in there and

95
00:07:51,920 --> 00:07:54,845
then also included in the declarations.

96
00:07:54,845 --> 00:08:02,255
Now, if you want to use that as a overlay with the material dialog component,

97
00:08:02,255 --> 00:08:08,285
we also need to include that into another property called as

98
00:08:08,285 --> 00:08:17,460
entry components in our ng module decorator here.

99
00:08:17,460 --> 00:08:19,715
So, inside this entry components,

100
00:08:19,715 --> 00:08:23,810
I also need to include the login component in here.

101
00:08:23,810 --> 00:08:26,000
Now, this will enable us to use

102
00:08:26,000 --> 00:08:30,235
the login component as an overlay on top of the current screen.

103
00:08:30,235 --> 00:08:35,330
So, once we have updated the Angular material component,

104
00:08:35,330 --> 00:08:39,370
now, we need to be able to trigger this login component.

105
00:08:39,370 --> 00:08:42,530
Now, we have added in the button into

106
00:08:42,530 --> 00:08:47,240
the header component and then here we have this function called open login form.

107
00:08:47,240 --> 00:08:51,770
So, this needs to trigger the showing of the dialogue.

108
00:08:51,770 --> 00:08:56,350
So, going into the header component.ts file,

109
00:08:57,410 --> 00:09:04,350
to make use of the mat dialog component in the header component,

110
00:09:04,350 --> 00:09:12,420
let me import MatDialog and then

111
00:09:12,420 --> 00:09:22,605
MatDialogRef from angular material.

112
00:09:22,605 --> 00:09:26,745
Inside this function, in the constructor,

113
00:09:26,745 --> 00:09:28,575
let me inject

114
00:09:28,575 --> 00:09:37,365
the dialogue as MatDialog.

115
00:09:37,365 --> 00:09:43,680
So, this is a service that enables us to open the component as a dialog component.

116
00:09:43,680 --> 00:09:45,615
Now, how does this work?

117
00:09:45,615 --> 00:09:50,039
So, in here, we need to add in this function called openLoginForm,

118
00:09:52,090 --> 00:09:57,610
which when invoked should trigger the showing of the dialogue component.

119
00:09:57,610 --> 00:10:00,894
So, for this, we'll say, this dialog,

120
00:10:00,894 --> 00:10:03,860
and this dialog supports a function called

121
00:10:03,860 --> 00:10:09,395
open to which we supply the component that is going to

122
00:10:09,395 --> 00:10:18,170
act as the view for the dialogue that is overlaid on top of the current web view.

123
00:10:18,170 --> 00:10:22,415
So, here, as we realize,

124
00:10:22,415 --> 00:10:28,475
we have declared the login component as the dialog component.

125
00:10:28,475 --> 00:10:33,740
So, we will invoke the login component

126
00:10:33,740 --> 00:10:39,670
and then also we will specify a size for the dialog.

127
00:10:39,670 --> 00:10:40,910
If you want to,

128
00:10:40,910 --> 00:10:44,089
you can allow the default size to be shown,

129
00:10:44,089 --> 00:10:47,610
but you can also configure the size explicitly if you want.

130
00:10:47,610 --> 00:10:48,620
So, in this case,

131
00:10:48,620 --> 00:10:57,960
let me configure the width and the height of this dialog.

132
00:11:02,370 --> 00:11:05,960
You don't necessarily have to do this, if you don't do this,

133
00:11:05,960 --> 00:11:11,990
then the dialogue will be shown in the standard default size here.

134
00:11:11,990 --> 00:11:16,550
So, with this, my header component

135
00:11:16,550 --> 00:11:20,490
is now configured such that when the open login form is invoked,

136
00:11:20,490 --> 00:11:23,765
then this will enable us to open

137
00:11:23,765 --> 00:11:28,835
the login component as a dialogue and then show it on top of the current string.

138
00:11:28,835 --> 00:11:32,090
So, let's save all the changes and then go and take

139
00:11:32,090 --> 00:11:35,605
a look at our application in the browser.

140
00:11:35,605 --> 00:11:40,310
Going to the browser, you'll now see that at the right edge of the screen,

141
00:11:40,310 --> 00:11:43,010
we have another new button here called the login button,

142
00:11:43,010 --> 00:11:47,085
and see that sign in font awesome icon added to that.

143
00:11:47,085 --> 00:11:49,560
Now, when you click on the login button,

144
00:11:49,560 --> 00:11:53,995
you will immediately see a dialog pop-up on the screen.

145
00:11:53,995 --> 00:11:58,610
Again, you can dismiss that by clicking anywhere on the screen outside

146
00:11:58,610 --> 00:12:03,225
the dialog or you click on that and then the dialogue pops up on the screen.

147
00:12:03,225 --> 00:12:06,840
So, from Bootstrap, you have seen the modal in Bootstrap.

148
00:12:06,840 --> 00:12:10,485
So, this is exactly like the modal from Bootstrap.

149
00:12:10,485 --> 00:12:13,645
So, here, we have the dialog that pops up on the screen.

150
00:12:13,645 --> 00:12:17,720
Now, we have space on the dialog where we can now put

151
00:12:17,720 --> 00:12:22,790
in content that we need to display when this dialog is invoked.

152
00:12:22,790 --> 00:12:26,120
Also note this dismiss button here.

153
00:12:26,120 --> 00:12:27,260
So, when you click on that,

154
00:12:27,260 --> 00:12:29,030
the dialogue is also dismissed.

155
00:12:29,030 --> 00:12:31,535
Now, when you click anywhere on the dialog,

156
00:12:31,535 --> 00:12:36,320
nothing happens, but when you click on this button, dialog is dismissed.

157
00:12:36,320 --> 00:12:43,340
So, this is how the dialog component from Angular material works in our application.

158
00:12:43,340 --> 00:12:50,005
The next step is to add in the login form to this dialog.

159
00:12:50,005 --> 00:12:53,365
With this, we complete this exercise.

160
00:12:53,365 --> 00:12:58,250
In this exercise, you have seen how we can make use of the Angular material dialog to

161
00:12:58,250 --> 00:13:04,575
add an overlay to our application and then show it on top of the current view.

162
00:13:04,575 --> 00:13:07,610
We will add in the form to this.

163
00:13:07,610 --> 00:13:13,770
This is a good time for you to do a Git commit with the message dialogs.