Before we get started on Angular template driven forms, we need to find a way of overlaying content on top of the current web view. The Bootstrap, we have models that enable us to overlay content on top of the Web page. With the use of Angular material in our Angular application, the Angular material provides a component called as the Angular Dialogue Component which allows you to overlay content on top of the current view. Let's look at how we make use of the Dialogue Component in this exercise. To get started on this exercise, let's go to our code and we need to find a way of triggering the application to show the dialogue. So, to do that, let's add in a button into our tool bar here. So, going to the toolbar right at the top here, let me add in a span with the class flex spacer that we have introduced into our SCSS file for our application. So, we had introduced the flexor spacer in the styles.scss file here, right down below here. So, that's the class that we're going to use with a span here. So, when you apply the flexor spacer to the span, what it does is it provides enough space between the previous element and the element that follows here. So, it'll push whatever the element that follows the span to the rightmost edge of the screen as far as possible. So, here, after this, let me add in a button here. So, this button which when clicked will invoke a function called openLoginForms. So, as you realize, so this is where we're going to be supporting a form for our application. We'll look at how the form is developed in the next exercise. Now, for this, let me add in the corresponding font awesome icons. So, I'll say fa fa-sign-in, and also add in fa-lg to that. So, that will add in a icon, the sign in icon here, and then following this, we will put the word login in there. So, this will create a button called login in the tool bar to the right edge of the screen together with the sign in icon there, which when clicked, will open a login form. This login form itself will be hosted inside a material dialogue component. Now, to create a dialogue component, obviously, we realize that that is going to be a component that needs to be overlaid on top of the current view there. So, we need another component to be added to our application. So, let's go to the terminal and then add in one more component into our application. Going to the terminal, let me type ng g component login. So, we added a new component called as the login component to our application. Once the login component is added, let's go and configure the login component to be a dialogue component in our application. So, to do that, let's go back to our code. Getting back to our code, we now see that the login component is now open. Let me open the login component.ts file. So, configure this as a dialogue component in Angular application using the material dialogue component. Let me import MatDialog. So, this is the component that supports the dialogue component in Angular material and then also let me import MatDialogRef and these are imported from angular material here. This will enable us to create our component and turn this into a dialogue component. Now, after this, let's go ahead and then configure our template file here. So, going to the template file here, I'm going to create this as saying mat-toolbar. So, within this dialogue also am going to display a toolbar. For this toolbar, I will say login right at the top, following that, we will introduce the flex spacer class here and then after the flex spacer class, we will add in a button with the attributes mat-button mat-dialog-close. So, this mat-dialog-close is something that the dialogue components supports for us, this attribute which turns this button into a button which when clicked will close this dialogue there. Inside this button, I'm going to use a times in there. So, that'll display it as a cross on the screen there. So, that's the button that we will add into the dialogue. Right now, our dialogue contains only this in its view. Now, to enable us to include the dialogue component and make use of it, of course, we need to go to the app module. In the app module, we need to import the corresponding module that supports dialogue component. So, we'll import the MatDialogueModule from Angular material dialog. So, this will add in the dialogue module into our application and then as you expect, they will have to go down here into the imports and then import that dialog module into our application. Not only this, now, in order to turn a Angular component into a dialog component, we also need to declare that component as an entry component. Now, recall that we added in the login component to our application and so this login component is already added in there and then also included in the declarations. Now, if you want to use that as a overlay with the material dialog component, we also need to include that into another property called as entry components in our ng module decorator here. So, inside this entry components, I also need to include the login component in here. Now, this will enable us to use the login component as an overlay on top of the current screen. So, once we have updated the Angular material component, now, we need to be able to trigger this login component. Now, we have added in the button into the header component and then here we have this function called open login form. So, this needs to trigger the showing of the dialogue. So, going into the header component.ts file, to make use of the mat dialog component in the header component, let me import MatDialog and then MatDialogRef from angular material. Inside this function, in the constructor, let me inject the dialogue as MatDialog. So, this is a service that enables us to open the component as a dialog component. Now, how does this work? So, in here, we need to add in this function called openLoginForm, which when invoked should trigger the showing of the dialogue component. So, for this, we'll say, this dialog, and this dialog supports a function called open to which we supply the component that is going to act as the view for the dialogue that is overlaid on top of the current web view. So, here, as we realize, we have declared the login component as the dialog component. So, we will invoke the login component and then also we will specify a size for the dialog. If you want to, you can allow the default size to be shown, but you can also configure the size explicitly if you want. So, in this case, let me configure the width and the height of this dialog. You don't necessarily have to do this, if you don't do this, then the dialogue will be shown in the standard default size here. So, with this, my header component is now configured such that when the open login form is invoked, then this will enable us to open the login component as a dialogue and then show it on top of the current string. So, let's save all the changes and then go and take a look at our application in the browser. Going to the browser, you'll now see that at the right edge of the screen, we have another new button here called the login button, and see that sign in font awesome icon added to that. Now, when you click on the login button, you will immediately see a dialog pop-up on the screen. Again, you can dismiss that by clicking anywhere on the screen outside the dialog or you click on that and then the dialogue pops up on the screen. So, from Bootstrap, you have seen the modal in Bootstrap. So, this is exactly like the modal from Bootstrap. So, here, we have the dialog that pops up on the screen. Now, we have space on the dialog where we can now put in content that we need to display when this dialog is invoked. Also note this dismiss button here. So, when you click on that, the dialogue is also dismissed. Now, when you click anywhere on the dialog, nothing happens, but when you click on this button, dialog is dismissed. So, this is how the dialog component from Angular material works in our application. The next step is to add in the login form to this dialog. With this, we complete this exercise. In this exercise, you have seen how we can make use of the Angular material dialog to add an overlay to our application and then show it on top of the current view. We will add in the form to this. This is a good time for you to do a Git commit with the message dialogs.
