Angular Material Tutorial in One Video

quick demo of this video series with this video we have started a new video series on building complete angular material application with practical examples in upcoming series of videos we will learn how to use angular 6 material we will have discussion on form design operations pop-up dialogue data table with paging sorting and filtering and much more in this video we will design the angular material form for cred operations containing almost all important controls like input text box drop-down list radio button checkbox date picker etc so please watch till the end of this video series what's up YouTube welcome to code affection in this we will design the form for credit operation inside the form we will have the most frequently used crud components like text box drop-down lists radio button check box and they become in the next video we will implement the actual code operation with firebase in following tutorials we will discuss angular material data table popup window and much more with practical example as you know angular material is a package or tool for angular developers it contains high quality UI components from Google material design so here we have the official website for angular material material dot angular dot IO and here we have the website for Google material design in last few months Google updated their products with material design for example here we have the new interface for Gmail and this new interface is much better and impressive than the old one so I hope this is an inspiration for new angular material developers so let get started with our project first of all let's open the folder we want to create the project so here is the folder and select the folder inside this folder we have to create a new angular 6 project for that I will use the integrated terminal from this IDE make on terminal here you can use this angular CLI command ng new then application name I will name this application as complete angular material app hit enter so here we have successfully created the ambulances project here you can see the new folder with project name complete angular material app now we have to install angular material and related packages so first of all we have to navigate inside the project folder here now we have the NPM command NPM install then double - save in short we can do this double - yes first of all we have the main package angular material and then we have angular CD key in order to work with animations we have to install this package angular animations hit enter so here we have installed the angular material and related packages in angular 6 application all of these instructions are given in the official gates here and getting started so here we have the commands in PM commands for installing required packages finally we have to use a theme from angular material so here we have the pre-built themes from angular so we will be using this second theme here IndyGo pink dot thesis now we have to include the corresponding scissors in our project so open stars dot CSS here and then we have to add the add import statement for the style sheet along with this theme stat sheet we have to add a style sheet reference for material icons that you can see here just search for material icons so these are the available icons in order to use these icons we have to use this starchy drawer fronts here under this step six you can see this reference just copy this ran back to the project open index dot HTML page just about this head end tag we can add this start sheet reference now in order to show you the application structure that we want to build in this I'm going to create a new text file so click on this new file here I will name this file as application structure inside that I will paste this structure so in this application we have to create two components employees and employee so with this series of tutorials we will discuss topics related to angular material based on the employee register application we will deal with details of employee like full name mobile email Department than gender etc so first of all we have to create two components employees and employee and inside the shared folder we have the employee service class so first of all we have to create the components so currently we are inside the project folder in order to create a new component you can do this ng G for the real C for component first of all we have the employees parent component so here we have created the parent component employees from application structure it is clear that we have this parent component employees inside that we have the child component employee we can use the same previous command with some modifications in order to see the previous command just hit up arrow and we have to create the component inside the folder employees then component name will be employee hit endo so here we have created the child component employee now we have to create one service class inside this shared folder so we can use this command engi g4 generate as for service we have to create the service class inside the folder shade which is not created but when we execute this command if there is no fold up with shared name it will be created along with the creation of service class you have to create the service class with name employee service so we just need to type employee here hit enter so that's it here we have the shared photo inside that we have the service class along with this typescript file which is the file with extension T s we have another file with extension spec dot T s which is for test purpose we are not going to test this application so let me remove this file now enough with recreation we have to run this application for that I will open a fresh terminal click on this plus button here navigate inside the project folder then you can use this command ng serve double hyphen open in short you can just type o hit enter it will build and open the application in your default web browser so this is how the fresh angular six a precaution looks like now we can start designing our application so inside this default component HTML app component HTML we want to show the parent component employees this one employees so for that we can use the component selector which is here inside the component type script file up - employees now let me copy this and paste inside this HTML here now we have to create a tag with this selector okay now inside the employees component HTML I want to show a top toolbar containing application header instead of this default paragraph we need a deal with glass container so here we have the deal with glass container inside this day we can show the toolbar from angular material so here we have the corresponding tag mat - tuba for each angular material component we will have this prefix for each component mat now in order to understand how to use angular material components here you can see the official documentation just go to this components here and inside these navigations you can see toolbar here for each angular material component description we have three tabs overview API and examples inside the overview tab we will have the basic usage of the component below that we will have the various configurations for the component inside this API tab first of all we will have the impose statement related to the component module below that we will have the in-depth details like directives properties related to this module and inside this last tab examples we will have the various usage of the component so for this matt toolbar component here we have to import this module mat to bar module that we can do in a bit before that inside this mat toolbar we need to show a span inside that we will have the application name I will name this application as angular 6 material before and after this pan I will add one span like this both of them have this class fill remaining space so that we can position this pan in the center now we have to define these CSS class inside the default stand sheet which is stars dot CSS here first of all we have the div container inside that we have modified the margin and we have defined this class filled remaining space with Flex modification now back to the component HTML here as we have seen inside this documentation in order to use toolbar we have to import this module mat mordioux like this for any angular material component we have to import corresponding module inside our project whether it is input element or button or drop-down normally we will import the module inside the default module file AB dot module tortillas if we add modules for each angular material component this file become messy so in order to handle this problem I will create an extra mode you here so just click on this plus button here in order to create a new module you can use this angular CLI command ng G for generate m4 module I will name this module as material sorry first of all we have to navigate inside the project folder then run the command so here we have successfully created the module material here inside that we have the module type script file first of all I will add an import statement for angular material unlike other import statement in order to reduce the number of imported Mencia with this single line we have imported all modules from angular material with this alias material now from this angular material we have to import this class here mat toolbar module let me copy this then we have to import this from material dot mat toolbar module now along with this import array we need exports array also so here it is exports inside that we have to add the same module let me copy this and paste it inside this now we have to import this new module material module inside this default module class app module dot TS so first of all we have the import statement here now we need to add this material module inside this imports array here now let me save all of these modifications here then back to the application so here we have the toolbar just below this toolbar we need to show the edge EML from employee component which is the child component for employees so we have to modify this component HTML inside this component HTML we will design the angular material form using reactive form approach or model driven approach for that first of all we will define the form group inside the service class here for reactive forms approach we have to import these classes form group and form control from angular forms now we can define a property of the type form group so here we have deform it is of the type form group class and it is initialized with this constructor of form group inside that we have to provide an object containing form controls so here we have the first form control which is equal to dollar key is equal to new from control and here we have the default value which is none dollar key property is used as the primary key or unique identifier to identify each employee record from the collection you will understand this record once we submit this form for inserting new employees after this property we have another control for full name which is equal to new form control and we have the default value as empty string then we have email then mobile then we have city and here we have gender for gender we will have a radio button control after that we have Department for Department we will have a select control or drop-down list then we have hype date it will be a date picker finally we have this is permanent control it will be a checkbox to identify whether a user is permanent or not by default it will be false now in order to use this form group property in other component classes we have to inject this in app module dot es5 so back to app dot module tortillas file first let's add the impulse statement for employee service clause now have to add this employee service class inside these providers are here now using this form group property we have to design the form inside the component employee dot component dot HTML for that force therefore we have to create an object of this employee service class inside the corresponding typescript file employee component or TS file so here we have the same import statement for employee service now we have to create an object of the employee service inside the constructor which is here service is of the type employee service class instead of this default paragraph I will add a form element so here we have the form element and we are going to design this form using the service class property for which is of the type form group for that we can add this attribute form group which is equal to service dot form in order to work this reactive form approach or model driven approach we have to import the reactive forms module inside app module dot ts file here so here it is importing forms module from angular forms now we have to add the same class inside this imports array here now back to the component HTML I am going to add a custom class for this form here which is normal for I will define this class inside the standard CSS with updated Margy now inside this form we are going to divide the form into two grid columns corresponding documentation can be seen here go to components then layout here we have grade list so for this particular form here we need two columns with one draw you can see the basic usage of the component here for this we have to import this module matte grade list module so we can do that inside the new mode you will here material just add the module Matt great list module inside imports array and the exports array then back to the component HTML here we have the grid list component it has two columns since we have one draw we don't need to specify number of rows we will specify the row height as 300 pixel inside this we need to column so here we have two Matt grid type we will start with the first column inside that I will add a div with class controllers container now we will define the class inside these tests or CSS here for the class we will set the width as 100 percentage and we will have a 5 percentage padding inside this div here we have the first control which is input element it's of the type hidden' and here we have the form control name which is equal to dollar key that means here we have created a component for this dollar key which is the primary key for the employee ok so that is why we have hidden this property here now just below this hidden field we just need to create a textbox for full name for that first of all we will add this mat form field generally which is used to enclose more than one angular material for now here we have the input element and we will set the form control name as full name in order to convert this normal input element into a matte input we have to add this directive matte input here after that we will set the placeholder as full name matte input documentation is given here under form controls you can see this input so for any input text balls we have to add this directive matte input you can see various examples here with prefix and suffix you can check them later for full name we need a normal text box in upcoming tutorials we will discuss input with prefix or suffix element like this so for this component we have to import this class here Matt input module and for this form field here we have to import this here you can see the API mat form filled module so let's import these two module classes inside this material module so here we have filled module and input module we have to add the same inside the expose array also now back to the component HTML currently inside this form field we have a single input control later we will have more controls when we implement validations like this full name we need to add form field and input controls for remaining properties so here we have the control for email then mobile and city now let's look how the form lose with these controls for that open parent component HTML which is here employees component HTML just below the toolbar we need to show the HTML from the child component so here we have to add the child component selector app - employee now let me save all of these modifications here then back to the application so here we have the four input controls inside the fourth grade column here we have align each control in horizontal instead of that I want to show them in vertical order so that one control per one line for that we can add the styles here inside the div all of the component will be said 200 percentage okay now let me save this then back to the application oh boy here we have another problem only two controls are listed let me check the inspect so it is related to browse the animation module I think so we have to add the corresponding module in app module OTS file so here we have the corresponding import statement browser animation module from platform browser animations now we have to at the same inside the imports array let me save this back to the application now let's add remaining controls inside the second column in Crete so here we have the second gate column inside that we will have the same tip that we have added here with class controllers container first of all I will add radio button for selecting gender for that first of all I will add a div with class add bottom padding this bottom padding is required for the proper alignment of controls like radio button and checkbox so here we have to define the class width padding 10 pixel inside the day we will have the radio button before that let's look the documentation here we have the form controls inside that we have radio button so this is how it looks okay so in order to work with this we have to import this module so open the material module in our project we can add the module like this then back to the component HTML we can do this they will have this matte radio group and we will set the form control name to gender inside that we need three radio buttons okay one for male and corresponding value will be 1 then female and for other types of gender value will be 3 now if you say this you can see the newly updated radio buttons for male female and others let me see them it looks stick to each other so we have to separate them for that we will define this style here this is particularly for the radio button we will add the margin left as high pixel now let me save this back to the application now it's almost fine if you are not happy you get increased imagine now let's look how to add drop-down list or select control in angular material so let's have a look at the documentation here here we have the Select control so this is how the default control look like you can see where is our modifications here basically for this control we have to import this math select module so corresponding module will be Matt select module let's add them in imports and exports array back to the HTML now let's add a form field for select control inside that we have the Matt Selleck control and then we will set the form control name as Department which is already defined in angular material form group and here we have the place holder as department now inside this control here we have the force default option which is not for options we have to use this Matt option tag for now I will show the remaining options from a static array in the next video we will convert this into a dynamic drop-down list so first of all we have to define the static array in the corresponding type script file departments it contains three options for Department one department to and Department three now back to the component HTML we have to I trade through this static array here so I will add the ng container and here we have the ng for detective and we will iterate through this static arrived with this department variable so here we have the option mat option that we set the value with this string interpolation department dot ID and here we have the value Department dot value now let me save all of these modifications here back to the application pool that's it Department one department two and so on now we have two more controls like this we have to add date picker for selecting heart date for the employee how we can add date picker in angular material let's have a look in our documentation under these form controls you can see the date picker here we have the basic usage of the date picker you can see some variations also here okay as per the documentation you can see that we have to import this mad day pickup module but impractical along with this module we have to import the dependent module native date module so let's look how to work with this date picker first of all we have the form field and here we have the input control and we will set the form control as hard date and here we have the mat input that means this is a normal text box and here we have the mad day picker which is equal to picot then placeholder will be had date after that we have a toggle that means which is responsible for this toggle here this one okay nor this calendar just this picker so we have added that toggle as a suffix and here we have the four attribute picker so this is how we connect these two controls after that we have this mad date picker which is responsible for this calendar here okay now before showing this date picker in our form let me add a checkbox to identify whether a user is permanent or not you can see the checkbox documentation here checkbox you have to import this module Matt checkbox module here you can see the basic usage and here we have some examples with some various applications so back to the project inside the material mode you will we have to add this module Matt checkbox module in both of the arrays and back to the component HTML for surfer we have a div with class at bottom padding which is already added here then inside that we have the control mat check box form control name is equal to is permanent so here we have done with input form controls let me save this back to the application here something went wrong what's happening let me check the inspect yes we for go to import modules related to date pickup so here it is they become module which is already defined in our documentation but this is another dependent module so do not forget this dependent module let me copy these two modules then pasting inside the exports are here save back to the application here we have the higher date and here we have the check box now what do we do with these controls we need a submit button right so we can do that here we'll add another div here with class button TRO and inside that we have one button for submit and you can see the details of button in as per the documentation here under buttons click on button here here we have the default button for various types of UI interface you can see here a basic button raise button so on so color is set as primary type will be submit and text will be submitted after the submit button we need a player button so here it is so in order to work this button we have to import this corresponding module mat button module so open material module and we will add the button module here and here let me save all of these modifications back to the application here of course there will stick to each other unless we add a margin like we have done for this radio button let's open stars dot CSS then here it is we save this back to the application so everything is fine now here we completed with form design so this is how we can design forms in angular material with form group now let's look how we can implement validations inside this form that means angular material validation for that for server we have to update the form group that we have defined inside the service class here in order to work with validations we have to import this new class valid from an coliforms now I want to make this full name and mobile as a mandatory field so that we can pass through the constructor second parameter so he will set this full name and this mobile has a required field and for this email control we have to verify the correct format of email for that we can add this validation here validators dot email for this mobile text box we need one more validation which is min length so we can specify the validation like this validators dot min length it should at least contain eight numbers with that we have defined validations inside this form group property here now we have to show validation indications or error messages in our HTML file which is here employee dot component dot HTML since we have made this full name and mobile as a required or mandatory field it is a best practice to add this a string mark for these two controls here I will add the suffix with a strict mark for both of these controls here so that user can easily identify this is a required field now in order to show the validation error about this control full-name we can do this match our directive can be used inside that we will show this message this field is mandatory this mat our directive is already defined inside this mode you will hear form field module that you can see in our documentation here we are inside the form field you can see the first directive mat or a single error message to be shown underneath the form field okay like this we have to show error messages for this email and mobile for email we need to show the error message when we have an invalid email inside the textbox so we can do this invalid email address will be shown when there is an error due to email text box now for this mobile control we have multiple validations we have required validation and mid-length so let's look how we can show different error messages for different types of validations for that we will use the mad error directive with ng if so we can do this I will show the error message this field is mandatory when this condition becomes true it checks whether we have any error or not if we have any error and which is related to require then we will show this error message otherwise we will show this message minimum 8 characters need when this condition satisfies now finally I want to disable the form submit button when this form as a whole East North Valley so we can add this disabled attribute based on this condition here we will add this disabled when this conditions satisfied that means the form as a whole is not valid let me save all of these modifications here back to the application initially the submit button is disabled that means this form is not valid you can see here full name and mobile are mandatory validation error message will show only when we leave that control as empty now you can see the error message this field is mandatory now let's do the same with mobile it is mandatory now if we enter some digits inside that we have another validation minimum 8 characters needed so here it is finally this form as a whole is valid so here you can see that the submit button becomes enabled email is not mandatory but if we under something inside that it should be in proper email format otherwise we will have this validation error message invalid email address if you complete with a valid email now this form as a whole is valid and thereby we have enabled this submit button so this is how to implement validations inside angular forms now let us look how to clear these controls using this Clear button here okay for that I will wire up a clique even for this clear button we have to define this on clear function inside the corresponding type script file here so here we have the on clear function inside that furcifer we will clear the form group by calling this function here reset function from this form group property when we call this reset function all of the control value will become null so we have to initialize the form controls to their initial default values for that I will define another function in our service class it will be initialized form group now we have to define this function inside the service class here it is as simple as this here we have the function initialized form group in order to change the values of these form controls from this form group we can call this that value function inside that we will have another object containing default values of these controls here okay now let me save all of these modifications here back to the application let's look how this player button works click on clear in this part we have completed with designing credit form using angular material form group you can find the github link in video description in this video we are going to implement firebase crud operations inside this project and later we will submit this angular material form in order to insert a new record into firebase in previous part we have implemented this drop down using a static array we will create a department collection in our DB and using that DB we will list the items here inside this select component so we will change this static drop down into a dynamic one finally I will show you how to build a notification message with angular material with the help of angular material component snackbar so before starting with this angular 6 project I am going to start with creating this firebase project for that you have to go to this website consult on firebase google.com and click on this add project button here I want to name this application as angular material credit in short I will name it as a M cred then accept these terms here click on create project so here we have successfully created the project click on continue here we are inside the firebase project dashboard and go to database here we need to create a real-time database so you can click on this create database button here we have two types of mod logged more and test mode I will select the test mode because we can access the database without authentication now click on enable here you can see the warning your security rules are defined as public you can dismiss this notification now in order to work with this PI based project we have to install two NPM packages inside this angular 6 project here for that I'm going to open one more terminal here we are already inside the project photos so we can right away run our NPM command so corresponding NPM command will be something like this NPM iPhone installed then double - save or in short you can type double - yes first of all we have to install the package firebase and angular fire to hit enter so here we have successfully installed those two packages now we need to initialize them with firebase project connection details so back to the firebase project then click on this project overview you can click on this web option here then copy this specific object from here then back to the project then inside this environments folder you can see this file environment dot T is inside this constant environment I am going to add one more property here it will be firebase config inside that I will store the connection it is that we have copied from the firebase console now open app module dot T is file then we need to add these two import statement for these two classes angularfire module and angular file database module from angularfire to module now we need to initialize this angularfire module using the connection details stored inside this environment or TS file so I will add the import statement for this constant also so here it is now we just need to add these two modules inside this end ports array here angular file database module and angular fire module and we need to call this function initialize have inside that we have to pass this constant firebase confi so we just need to do this and we don't man dot firebase confi so far we have created firebase project and we have configured this angular 6 project with firebase now let's implement firebase square operations for that open the service class here employees service class first of all we have to import these two classes and our database and Angela fireless from angularfire to database now we have to inject this angularfire database inside this service class here firebase it's of the type angular fire database now we have to define a property of this type angular file is so that we can retrieve inserted a course from firebase dB so here it is employees it's of the type and could have fire list now we can start defining functions for angular and firebase crud operations first of all I will define a function in order to retrieve all inserted records into this employee list here so here is the function get employees in order to retrieve the insert of course we can do this here we have the injected angular fire database object firebase firebase dot list inside that we have the collection employees which is a node in our firebase DB which we have not yet created once we insert our code we will have this node employees under this node we will save the new records so inside this employee list we will have the collection but it will be of the type angular fire list in order to work with that it would be better if we have an absorber so we can do this we will call this snap shortchanges function from the object so that it will return and absorb from the angular fire list later we will discuss how we can make use of the absorber return from this function so first of all here we have the function for insert operation insert employee it has a single parameter employee it contains details of new employee in order to insert a new record we can do this we will call this push function from the angular fire list object Employee List inside that we just need to pass an object containing details of new employee so here it is full name is equal to employee dot full name so this bluie object must contain details of new employee like this full name we can pass remaining properties like this we have email mobile cities and Department hundred and is permanent so it will insert a new employee in to firebase DB collection under this node employees when we insert a new record into firebase DB collection it will automatically create the primary key or dollar key now let's do the update operation here we have the function update employee it contains a single parameter employee in order to update an existing record we can do this we will call this update function from the angular fire list object as a false parameter we can pass the primary key or dollar key of the record as a second parameter we will pass an object containing updated details of the employee here we have the final crud operation delete we have this function delete employee it contains a single parameter dollar key it's of the third string in order to remove an existing record we can do this we will call this function remove from this angularfire list object and we will pass the primary key dollar key here so here we have defined one function for each crud operations now we have to submit this angular material form so that we can insert a new employee into firebase by calling this function here insert employee so let's look how we can do that here we have the employee HTML and here we have the form element now we have to wire up submit event so I will add this submit even here when we submit this form we will call this function on submit now we have to define this function inside the typescript file here so here we have the function on submit inside that first of all we have the if statement to check whether the form is valid or not we have had a few violations in previous video and with this if statement here I will check whether the form is valid by checking this property valid from the form group property from our service class now in order to insert a new record after the submission we can do this we will call this function here insert employee so we will do this this dot service dot insert employee function can be called inside this function we have to pass the object employee containing details of the new employee when we submit this form in order to retrieve values from these controls we can do this we will have the value property from the form group object so this will insert and you employee into fire-based DB collection now we have to reset this form controls to the initial state and so here we will call the reset function here form dot reset after that we have to initialize these controls to the initial default value for them we can call this function initial form group like we have done inside this on clear event so inside this on submit even we have called this function insert employee from the service class inside that in order to insert a new record we have called this post function from employee list in order to work this function here we have to force initialize this property employee list that we have done inside this get employees function so before any of these crud operations insert update and delete we have to initialize this property employee list so we have to call this get employees function before any of these following functions so that we can do inside the ng on a lifecycle hook here this dot service dot get employees now let me save all of these modifications here now let's fill this form for a new employee record now let's submit this form form is reset to the initial stage now let's check the firebase DB weather we have inserted the new record or not here we are inside the project overview go to database here we have the newly created node employees under that we have the new employee record here we have the primary key or dollar key here we have the city for Department we have the value 2 for department we have selected second item corresponding value is 2 now we have the email full name gender is stored as 2 we have selected female corresponding value is 2 we have is permanent as true finally we have the mobile number now inside this video we have to discuss two more points first of all here we have the static drop down we have to convert that into a dynamic drop down second when we have to show a notification after submitting this form using snag by a component from angular material so first of all we will convert this static drop down into a dynamic one so that I will add a new collection departments inside that I will add entries manually you can design another form for Department quote operations considering the time we have I will enter or create the collection manually so let's create the new collection departments inside that we will insert new for departments first of all we have the key value I will set it as ABC 1 we have to make sure that it won't repeat in remaining elements inside that we have two properties name and core department name and department code first of all we have name corresponding value will be accountant then we need one more property Department code code I will set it as a c c now click on add so here we have created the new collection departments inside that we have a single item with key ABC it is for accountant corresponding code will be a CC like this we have to add three more departments for that you can click on this Add button here so finally we have inserted four departments under departments node here accountant software engineer developer and team leader now using this firebase DB collection departments we have to update this static drop down here for that I will create a separate department service class inside this shared folder here so let me open one more terminal here here we are inside the project folder in order to create the service class we can do this ng D for generate s for service we have to create the new service class inside this shared folder class name will be department service so we just need to pass department here hit enter newly created service class department dot service dot TS can be seen here along with that we have the test file I will remove that now inside this service class we have to retrieve these departments under this node here for that we have to import classes from angularfire - like we have done inside this employee service class so let me copy this import statement from here and pasting inside this department service class we have to inject this angularfire database so let me copy this and paste it inside this department service constructor here I will define two properties first of all we have department list and array inside this department list people the trip all of these collections here and we will convert that into an array and we will save that are inside this array property here so all of these conversions can be done inside this constructor here first of all we will populate this list from this firebase collection departments for that we can do this this door department list is equal to five based or list inside that we have the North departments now we have to convert this angularfire list into an array here for that we have to trade through the list here so better we have to convert this into an absorber for that we can do this it will call this NAB shortchanges function it will convert this angular file is into an absorber so we can subscribe to that observable here inside that we have this arrow function with this single parameter list and we will do this here we have the array and we will generate the array from this list here we will call this map function inside that we have another function with this single parameter item and we just need to do this we will return an object from the function containing properties from this collection here so this filter turn an object containing these two properties code and me and here we have applied three dot restructurings index from JavaScript so that properties inside this object here name and code can be a part of the new object here along with properties name and code we need this dollar key or primary key of the item for that we can do this item dot key will give the corresponding item dollar key value so this is how we can retrieve collection from firebase DB and here we have converted into an array here now we have to inject this service class inside the app dot module dot E is file here so that we can make use of this department service inside other component classes now open this employee component got type script file here in order to use this array here we have to create an object of this service department service inside the component type script file here so I will add the import statement for department here and we have to create a property of the type here Department service it's of the type Department service class now open the component HTML here currently we are using this static array here instead of that have the RA from the service class department service dot array and we have to change this value department dot dollar key which is the primary key for the item and for the option value I will concat the code and the name of department so let me copy this and paste in here and I will separate the code and name with a hyphen now let me save all of these modifications here before that let me remove the previous static array from here save all of these changes back to the application here so here we have created a dynamic drop-down in angular material from this firebase collection departments finally I want to show a notification message after a successful submission of the form that means we will learn how to create toast message in angular material for that we will be using snap ba component from angular material so first of all let's have a look in our official documentation angular material go to components then under pop-ups and models you can see nagpur component so here we have a basic demo of the application it shows this pop-up notification here in order to work with this component we have to import this module here mat snackbar module so we can import that inside our extra module material here mat snackbar module we have to impose the same here also for working with pop-up notification in angular material I am going to create a separate service class inside this shared folder here in order to create the service class I will use the previous angular CLI command just hit up arrow and we can make the modification here we want to create notification service class so I will just type notification here and no newly-created typescript file can be seen here I will delete this test file with extension spec tortillas in order to work with the component we have to import these two classes from the angular material mat snackbar and mat snackbar config so here we have the basic class and this config class is used for the customization of the component based on our requirement like like positioning addition of extra CSS class delay of component etc now I will create a property of this class mat snackbar inside this constructor here in order to show a success notification I will define this function here with a single parameter msg which is message which is to be shown inside the notification in order to show the snapback component we can't do this we will call the open function from the object snackbar inside that we can pass this message and as a second parameter we can pass the action in this case we will set the action as empty here inside this documentation you can see that this part is the action we don't need the action so I will set it as empty string here now let's call this success function inside the form submit event after that we can customize this tank bar component so here we have the import statement for the notification service now inside this submit event here we can do this we will call this access function from the notification service class inside the function we have passed the message submitted successfully now let me save all of these modifications here back to the application in order to see that notification we have to first fill this form then we have to click this submit button so it will take some work you know am too lazy so I will move that into this button click even clear so let me cut this and paste inside this on clear function once we customize this note vacation as per our requirement I will move that back to this on submit function let me save this then back to the form here click on clear so here we have the basic toss message we have to customize this as per our need so back to the notification service class here in order to customize the notification we have to create an object of this class snackbar config so here it is config it's of the type mat snackbar config it is a normal object inside that we can configure or define the properties of the notification or toast message so all of the properties for this class is defined inside the documentation here inside the API tab you can see here a lot of them but for this application we will use some of them so first of all we have the duration I will set it as 3 second we have to specify in millisecond then we have the horizontal position I will set it as right then we have the vertical position I will set it as top now let's pass this config as a third parameter inside this open function here this dot config let me save this back to the application click on clear so here we have the notification now in order to change the appearance of this notification we have to we have to have a privilege to add some extra classes so let's look how we can do that for that we can use the panel class property from the config object since we have more than one class we have passed and have a containing notification and success class now we have to define CSS rules for these two classes inside these tiles door CSS here now let me save all of these modifications back to the application here click on clear boom here we have a nice pop-up notification now let's move that notification into the submit event and let me cut this and paste inside this onsubmit function here okay you can download this project source code from the github link given below in video description now in this video we are going to list all of these employees in angular material data table so here we have the overview of summary of this video tutorial it will list all of the employees collection inside this angular material we will discuss the mandatory features of a data table like sorting then paging and filtering here we have the same project from previous tutorial we will start with creating new component employee lists inside that we will deal with lists of employees you have to create that component as a child component for this employees component so here we have opened the terminal now let's run the ng command ng D for generate C for component we have to create that component inside employees folder component name will be employee - list hit enter so here we have the newly created component employee list now inside this new component employee leaves we have to retrieve all the inserted employees from this firebase collection here in order to retrieve these records we have already written a function inside the service class here employee service so here is the function get employees now we just need to call this function from this component here so that we can do inside this ng on it lifecycle hook before that we have to inject this employee service class inside the component so I will create an object of the employee service inside this constructor here now let's add the import statement for this service class for that you can use this shortcut here hold ctrl then press period now place the cursor on the service class hold ctrl then press period then select the appropriate impulsed Ament so here it is now inside the ng on lifecycle hook we can call the function get employed so here we go I will call the get employees function it will return an observable so we can subscribe to that absorber here now inside the SUBSCRIBE function we have to convert that angularfire list into an array exactly similar procedure is done in previous tutorial for Department so here is the procedure okay so same can be done for this employees collection also so here we have the callback function with a single parameter list inside that we can do this we will have the array variable and we will do this we will call the map function from this list parameter and inside that we will have another callback function with single parameter item inside the function we will return an object containing employees details so for that we will do this so this function item dot pale or dot Val will return an object containing these much employees duties also we have used three dot D structure in syntax from JavaScript so all of the properties from this object can be a part of this new object here now along with these properties we have to have this primary key or dollar key so we can do this we have added that dollar key from this object item dot key finally inside this array property we have a list of employees now let's look how we can show this array in angular material data table for that let's have a look in our documentation angular material then go to components here we have data table click on table so here we have the basic usage of angular material table of course it is a big component compared to components that we have discussed so far first of all let's add the required module it will be man double module so back to the project add the corresponding import statement inside the material module so let's add the parent module which is Matt tab module inside these two arrays imports and exports instead of rendering the tab using this array property here we'll convert that into another object of the type mat double data source which is another class from the mat tablet module now I will define a property of the type here list data which is of the type mat double datasource now we just need to do this we will convert the array into live that our object now we can use this list data to render the data travel before that I will define an array like this display columns which is of the type string array and I will initialize that array with a single item which is full name means inside this array we will name each columns that we have to show in our angular material data table first of all I will show you how to display a full name inside the table and then we'll be show the rest of the columns sorry we have to move this initialization after the map function so I will do this now open component HTML employee list component HTML here instead of this default paragraph I will add a div with class mat innovation is at 8 which is a class defined in angular material inside that we can add the mat table like this inside that we can add the math table like this now we can set the data source that we have initialized inside this ng on in lifecycle hook list data so we can do this data source is equal to this data now we have to define template for tabla header and body for that we can do this we will add these two tags here I will define what they means actually so this is for the header template we will use this tag Matt had ro and for the element we have applied this directive here Matt had roared F actually it will applies the templates of header row by header row we mean by this part here ro which contains the column header into that directory we have passed the string array containing full name only we can discuss the use of this array later below that we have this Matt draw element same as the header row directive we have another directive here Matt draw def which captures or applies characteristics of tablet body inside that we have passed this already sprayed columns like we have done in header row along with that we have this variable row which is used for the creation or rendering of the table body so here we have defined templates for header and body of the tablet now we have to define template for each cell in both header and body of the table for that we can do this we have ng container inside that first of all we will have this directive mat column def which is equal to full name with this directive we have named the column as full name this column name full name should be the inside this array here display columns so we have the column full name okay inside that first of all we have the template for the header cell that means we have defined this part here we had the cell like we have shown here we have this element mat had a cell in order to apply characteristics of header cell we will apply this directive here match header cell death now let's define the template for body cell or cell which contains the actual data for that we'll use this element here match cell in order to apply characteristics of the data cell I will apply this directive here matcel def and which is said to this expression LED element that means when angular material render dismantle it will do in the nitration based on the data collection that we have provided here on each iteration from this collection list data inside this element we will have an object containing current row that I can show you here for that I will use the string in the operation element and we have to convert that into a Jason so I will use this Jason pipe here now let me save all of these modifications here I have already running this application in my browser but still in our parent component we are running employee component instead of that we have to replace that with Employee List component use Employee List component save then back to the application here we have an angular material table containing one column full name inside the body we have shown a decent object representing current raw data instead of the complete object we need name only dot full name save then back to the application that's it now we have to do the same for rest of the columns now we understood how we can define template for both body and header now let's define template for remaining columns so first of all we have the email then we have mobile and city save then back to the application here it looks same as before can you guess where we went wrong yes it is related to the array which we have defined here displayed columns inside that we have to define these column names email MoBay and CD currently contains only one item which is fully so I will add the column name for those columns then save back to the application so with this array itself display columns we can change the appearance of the table means we have already defined template for these four columns inside these four ng container here in order to hide any of these columns you just need to remove that column name from here and save back to the application here we go we have only three columns full name mobile and city now if you want to change the order of column inside this table you just need to change the order of item inside this array save so here we have email as the first column save then back to the application so here we have email as before column you don't have to change the order of ng container inside this HTML it would be more difficult than doing here okay so I hope you have understood the template in angular material now along with these normal columns here I want to show an extra column which is for actions like edit and delete operations so I will add the corresponding ng container here in T container and we have the corresponding column name as actions here we have the header cell template for this column header cell will be empty and here we have the definition for body cell inside the cell we have two buttons one for edit operation and one for delete operation inside these buttons we have one material icon in order to walk this material icon we have to add the corresponding CSS style sheet which we have already done in our fourth video inside this index dot HTML so here it is along with that we have to add the corresponding module which you can see inside the documentation go to components then under buttons and indicators you can see icon then let's grab this module here Matt icon module now open material mode you will type script file then add that mode you will hear so here it is Matt icon module inside both of these arrays let me save all of these modifications then back to the application here again we forgot to add the corresponding column name inside the array which is actions save then back to the application so here we go we have two cute buttons here we will implement their functions in next video now we have to add some processing or metadata information about the table like when there is no employee in the employees collection we have to show no data and during the initial rendering of the tablet we will have a delay because of the delay in fetching the collection from firebase baby during that time we have to show loading data you can see the initial delay here let me reload this page we have a short delay before displaying the tablet first of all I will show you how to display an indication while fetching data from firebase dB for that we will add this footer element here Matt footer row now let's add the definition directive which is Matt footer Road F which is set to an array containing an element loading so we have to define an NG container with column name loading since we have defined this element as photo this element will be shown in footer of the tablet so here we go ng container here we have set the column name as loading inside that we can see this element mad photocell we have said the call span to six inside that we'll be sure this message loading data that we save this then back to the application here now you can see the footer loading data always this photo will be there that's not what we want we have to hide that photo after rendering this complete table for that we will add a CSS class into this photo using a condition so here it is we have used this ng class directive inside that we will applies the CSS class when this data is not empty means we have retrieved items from firebase DB means when we first at us into this rich data object inside this ng container we will apply this height class into the photo so that we can hide this element here now we have to define this class inside stylesheet here Stiles door CSS here we have this years this rule for height class we have added this photo CSS dies in order to position them in sender let me save all of these modifications here then back to the application so here it is and it is gone after rendering the complete tablet now let's look how we can show no data when there is no item in the firebase DB collection so back to the component HTML we have to add one more photo so here it is mat footer row now we have to add the corresponding ng container here it is exactly similar to the previous one except the column name no data and message inside that now let me say this back to the application you can see the no data message always though for this footer row also we have to apply the CSS class hide accordingly so back to the HTML so here is the ng class directive ng class we will apply this hi based on this expression here so we will apply this class hide when this list data is retrieved means we have executed this function get employees but there was no record means this list data is not null but it is an empty collection for more clarity you can say number of a course inside the collection if zero so this condition here is just opposite to the situation that I have just described here means we have to negate this condition here so I will enclose these conditions inside a pair of brackets and I will apply the negation operator exclamation mark now in order to demonstrate this situation we can't use this firebase DB collection employees because it already contains some records and you can see here if i refresh this double you can't see that message no data in order to show that I will change the firebase DB collection inside the service cross here I will add some extra characters here you don't have a collection with this name so there is no data now back to the application we have the message no data if you refresh the page you can see for so for we have loading data it will be displayed while retrieving the data after the execution of the get employees function here we have no data inside the collection now let me change the collection name back to the original employees save back to the application that's it now inside this angular material tab we will implement paging and sorting corresponding documentation can be seen here along with this table we have a page inator and sort head it's not that difficult so back to the application first we have to import cars bonding modules inside this file here paginated module and sort module you have to add the same inside the exports are a also then back to the component HTML here for the four let's implement sorting for that we have to add these maths or directive into the math table here so here it is math sort and then we have to apply math sort header detective to those Matt header cell which is to be sorted so here it is Matt sort header I will add these two remaining columns also email then mobile and city now we have to configure that inside this typescript file also first of all we will create the property sort using B which I'll decorator so here it is in order to use this future we have to import that along with this component and on in it also we have to import Matt zone so this view child decorator will look for the detective math sort inside this HTML here so that we can link this property to this data source property here so sorting will be easier now in order to configure this data source for sorting we just need to do this it will set sort property of this data source as this dot sort property now let me save all of these modifications here then back to the application something went wrong let me check the HTML here we have applied maths or then match sort header for remaining columns full name email mobile and city yes we have to apply this format header cell like we have done before cut and paste same here also save then back to the application that's it we are able to sort the tablet based on these columns here in both ascending and descending order now we have to implement paging inside this angular material data tab for that we have already imported corresponding module inside this typescript file here which is mad page in it module now back to the component HTML file here in order to implement paging for a table we need some controls like we have done inside this documentation here here we have a drop-down to change the size of a single page and we have few buttons here in order to change the current page inside that we have to add and configure required controls so first of all I will add an array which determines the current size of the page so here it is page size options inside that we have 5 10 25 and hundred so these items will be populated inside the drop-down and then we will initialize the page size as 5 so initially page size will be 5 so in a single page there will be only 5 employees now we have to configure this page later inside the component type script file here like we have done for sorting with the help of you child we will create another property page inator now we have to import this class math page later along with this math sort now we have to configure this list data for paging for that we can do this paginated property of list data is said to this paginated property now let me save all of these modifications here then back to the application here we go currently page size is 5 so we have 5 employer of course inside this page you can change the current page using this next and previous page button here if you want to increase the page size you can set it as 10 here along with this previous and next page button we can add two more buttons for navigating last and first page directly for that we just need to do this along with this paste size we have to add this data to here so force last buttons save then back to the application here that's it now let's discuss filter operation for filter operation we don't have to import some modules inside the project but it's not that easy like we have done for sorting and page we need an extra form containing a textbox to end our search keywords so back to the component HTML here just about the math double D I will add another div for the form so here it is deal with class search do inside that first of all I will add a button when we click on this button we will open employee form in pop-up window to insert new employees that can be done in next video now just after this button we will have the form for textbox so here it is mat form field and here we have a custom class search-form field inside that we have the text box which is displayed using two-way data-binding so here we have ng model we have binded that to property search key which is to be defined inside the typescript file and we have said placeholder as search' autocomplete as off so that we don't have any prediction for this textbox just after this textbox we need a clear button so here it is so this is an icon button so we have these two directives your mat button and mat icon button and with this mat suffix directive this button will be set as a suffix for this text box here similar example can be seen inside the documentation here here we are inside the input control let's go to examples so here it is okay this clear button is a suffix for these text box here in order to work this two-way data-binding we have to create this search key property inside the typescript file here search key which is of the type string also in order to work this two-way data-binding we have to import forms module inside the parent module which is app module dot ts file so I will import forms module along with this reactive forms module class we have to add this inside this impulse array here let me add few CSS rules for these custom classes here search due and search form field let me open the statute stands diseases so here we have added few CSS rules for filter controls let me save all of these modifications here then back to the application so here we have added cells controls when we focus into this text box here this placeholder is 40 we don't need this floating so in order to avoid that we can set this property here float level is equal to now save then back to the application here we have the Clear button we only want to show this button when this text box is not empty for that I am going to add ng-if directive here ng-if is equal to search key save then back to the application that's it initially we don't have a reset button here if I enter something inside this we have the reset button now let's add a click event for this button so here it is we will we will call this function on search clear now we have to define this function inside this start script file here function will be as simple as this this dot search key is equal to empty string when we enter something inside the search box we have to filter employee records from this table based on the keyword entered here for that we will add a key up even for the textbox here so here it is key up we will call the function apply filter' so here we have the function definition we just need to do this from the math table data source object list data filter property is equal to this dot search key dot trim to lowercase that means we will remove space whitespace from both ends and we will convert that string into lower case so this assign operation will filter a course from the angular material table based on the entered search key in the text box now we have to call this same function inside this clear function also this dot apply filter save all of these modifications then back to the application here let me try some keyword so here it is we have an employee with named Cedric is filtered if you want to clear this search result just click on this player button here so far we have discussed how to display a list of collection in angular material data table and then we have implemented filter sorting and paging in angular material but I can stop this tutorial here because some of you will ask how we can show a department name inside this tablet we can show department key because it is in the same collection employees but department name is in another collection departments if we were using relational database like SQL Server and MySQL we can directly execute a query with join operation but it's not that easy with no SQL database like firebase so I will use a different approach inside this department service here we have already retrieved all the records from department collection so I will define a separate function here into that function we can pass the department key and we will return the corresponding department name in order to do this filter operation inside this array I am going to install a new the NPM package which is lor - so for there let me open one more terminal here NPM install then double - yes no - hit end off installation is successful so we have to import the module here you have important lor - and we have said this alias underscore here now let's define the function get department name with a single parameter dollar key first of all we will check whether the key is zero or not department key will be zero when there is no Department selected while inserting new employee otherwise we have else cross inside that we will do this recall the find function from blow - and first parameter will be this array itself inside that we have already retrieved all the departments as a second parameter we have to pass a function which describes the condition for searching error code so here it is so here we have the error function with single parameter obj inside the function here we have the condition so with this function call here it will return all departments with matching key with this key parameter here so it will have these much properties code and name from that we need this department name so we can do this it will retrieve department name now we have the function ready now what do we call this function in order to show Department name inside this tab we have created this array inside the employee list component here inside the ng on it lifecycle hook so here itself we have to add the department name so inside this map function we have a callback function here of its single parameter item which is I creating through the each collection of employees so here we can call the function so first of all we have to inject the service inside this constructor now let's add the import statement for the service class so hold ctrl then press period then select the corresponding import statement now back to ng Oni lifecycle hook inside this map function we have a callback function with single parameter item which is I trading through the firebase collection so inside this function I'm going to define a new property department name in order to initialize this property we have called get department name function from department service here we have passed current employee department key we have saved the department key with this department in employees collection that you can see here department inside that we have the corresponding department key now let's add this department name inside this object here so that we can add that inside this area here so we just need to do this property name will be Department and value will be department in short we can pass department name it will be saved inside the department name property ok now we have added department name inside this array now in order to show this column in angular material data table first of all we have to add corresponding column name here now let's add an NG container so here it is department name and also we have said the match sort header for this column also we have displayed the data from this new property department name let me save all of these modifications here then back to the application that's it here we have added a column for department name finally I want to show you one thing here we have displayed five columns from the data source actually inside this list data object here we have more than five properties that you can see here we have department key then gender had date is permanent if I search for this higher date we can see the corresponding employee here which is not fair in most of the case so I will show you how to customize this filter operation into these file limited columns for that we will use the property filter predicate from the list data object and I will set the parameter with another function containing two parameters data and filter inside this data we have the complete collection of employees displayed in the material data table and here we have the filter which is the keyword that we have entered inside the function we need to restrict the filter operation in to these limited columns which we have already defined inside this displayed column array so we can do this we will do this sum operation inside this displayed columns inside the function we will have another error function like this with single parameter element and here we have the condition to select a record for this search result first of all first for we will avoid action column and then we will set the keyword inside the columns which we have specified here let me save all of these modifications here then back to the application if I search for this hire date again we don't have any record because we restricted the filter operation into these five columns here okay that's it you can download this project source code from the github link given below in video description in previous three videos we have created a form using angular material and we have submitted that form in order to insert a new record into firebase DB finally in last video we have created a complete angular material data table with sorting paging and filter operation in this video we are going to discuss about angular material pop up using angular material pop up dialog when you sir click on this create button we will open a pop-up like this inside that we will have a fresh form in order to insert new employees this form is created in force video and we have submitted this form in to firebase DB in second video in this video we will open that form in angular material pop-up window in order to close this you can click this button here in order to update an existing employee details here we have the button click on that it will again use the pop-up dialog inside that we have a form populated with current employee details it can make the required changes here then just click on the submit button finally we will implement the delete operation for that you can click on this delete button here if you confirm the operation corresponding lock code will be deleted so here we have the same project from previous tutorial before continuing with this project let's have a loop in our angular material documentation go to components then pop-up and models then dialog so here we have the dialog of you click on this button in order to see how it works in order to work with this mat dialog service or pop-up dialog we have to import this module here mat dialogue module so first let's do that and then we can discuss properties one by one so back to the project then open that specific module which is created for importing material modules so here we have the material module dot ES file so here it is mat dialogue module let me add the same in both arrays here both imports and exports currently we are running this application in my browser here first of all I will show you how to open the form which we have already created when we click on this button here we will open the pop-up dialog inside that we will show the form so let's look how we can do that so back to employees component here first of all I will add a click event for this create button here so open the corresponding HTML here then I will add the click event to this create button now we have to define this function inside the typescript file here so we have to create a function on create without any parameter inside that we have to open the form dialog in order to work with angular material pop-up window we have to import these two classes here they are mat dialogue and mat dialogue conflict this one this mat dialogue is the primary class and this class is to configure that mat dialogue window ok now we have to inject this class inside this constructor here dialogue which is of the type mat dialogue now back to the oncreate function here now inside this oncreate function we have to open employee component HTML inside that we have designed the form for insert and update operation in order to open that form in a pop-up dialog or popup window we have to do this here we have the property dialog from that object dialogue we just need to call the function open inside that we have to pass the component name or class employee component now in order to open a component in dialog window we have to add that component in app module door ts so here we have the main module app module door ts inside that we to add one extra array here and three components we will initialize that with an array containing employee component now let me save all of these modifications here then back to the application now click on this create button here so here we have the pop-up window inside that actually we have the employee form in order to see the form we have to increase the width of this model in order to demonstrate that I will just do that with inspect here we just need to increase the width here I will set it as 600 here we go so along with the we have to configure a few more parameters about this pop-up dialog so let's look how we can do that for that we will be using this class here Mac dialog config so first of all I will create an object of the dialog config class here inside that first of all I will set this property as true disabled closed means it will disable the feature of closing the window by clicking outside the window or by pressing escape on your keyboard then we will set auto focus to true means first focusable element inside the window will get the focus and finally we have set the width as 60 percentage of the whole window now we have to pass this config object as a second parameter here let me save this back to the application now let's try this create button here here we go now before showing these form controls here I want to make sure that they have their default values for that we will call the function which we have implemented in our second video tutorial so this function initialized form group will set the default values to form controls now when we submit this form corresponding employer code will be inserted into firebase VB along that we have to close this pop-up model so let's look how we can do that in order to close that dialog after form submission we have to write code inside employee component because form submission is done inside this employee component so first of all we have to have a reference to this model pop-up so first of all I will import the corresponding clause here which is mat dialogue graph from angular material now I will create a dialogue reference property for this employee component inside this constructor here so here we can do this dialogue graph which is of the type mat dialogue graph for component employee when we submit that form we will call this function here on submit now in order to do procedures related to closing that pop-up dialog I will define a function here on clause inside that for server we will reset the form and we will initialize the form controls to their default values and finally we have called this function cross from dialogue reference object now we just need to call this function on close from the form submission function on submit so here we go this dot close function can be called now let me save all of these modifications here then back to the application now let me try to insert a new employee record here click on create button here now let me fill new employee details now submit before so here we have inserted the new record and we have closed the pop-up dialog newly inserted a code can be seen here Fiona green so here we have done with insert operation using modal pop-up now let's do the update operation for that we have to click on this button here it will open the form by filling this corresponding employer code inside that now let's look how we can do that and here we are inside the Employee List component HTML for the corresponding edit button here we have to add a click event so here is the edit button this one I will add a click event for this button and we click on this button we recall this on edit function by passing raw object inside this raw object we have the complete properties related to employee that we have discussed in previous tutorial now let's implement this function on edit inside the typescript file here function name will be on edit for this function we have a single parameter row inside this function first of all we have to populate the corresponding employee details which we have inside this raw object now we have to fill this employee details inside this form here and we click on this create button it will be an empty form and we click on this edit button here it should be populated with corresponding employee details for that I will be creating a new function populate form in employee service for now I will just call that function here with this raw parameter inside this function we have to populate for group properties so here we have the employee service here I will define the function populate form with single parameter employee now in order to populate the form we have to update this form group here which we have created in second video tutorial form with corresponding employee values for that we just need to do this we will call this function set value from form group inside this function we have to pass that employee object containing employee details but here we have a problem inside this employee object which is passed from these employees we have an additional property than which we have defined inside this form group here all of these properties are the in the object which we have passed from this employee list the extra property is this one which is Department name which we have added inside this ng on it lifecycle hook here in order to display a corresponding employee name for a given department key so while populating the form using this function here we have to omit that property before setting form group object for that we will make use of lodash which we have already installed so here we have the import statement with alias underscore now we can do this we just need to call the function omit from the floor - omit and as a fourth parameter we have to pass the object employee as a second parameter we can pass the property which is to be omitted so I will copy the property name from here Department name let me copy this and pasting here now back to the edit button click event here we have populated the form with corresponding employee details now we have to open the angular pop-up like we have done inside this on create function here so I will just copy this here and pasting inside this function here let me save all of these modifications here then back to the application if I want to edit this employee details here just click on this button here so here we have the employee form filled with corresponding employee details now after making require changes for update operation same submit function can be called with which we have defined which we have defined for in operation in the employee component here now we want to modify this function for update operation also for that we just need to do this we have added this if Clause here that means this insert operation will be done if the value inside the key property is null otherwise we will do the update operation inside this else close here for that we just need to call the function update employees which we have already defined in second video tutorial instead of calling push function from angular file list we can call the update function if you have any doubt we can check the second video tutorial so everything is ready for update operation also let me save all of these modifications here then back to the application I want to edit this employee record here click on this edit button here I will add the suffix updated click on submit so here we have successfully updated the employee you can see the updated employee name here now let me change that back to original name now I want to customize this pop-up window here because we have disabled closing of this pop-up dialog by pressing escape or clicking outside this pop-up dialog so we have to add an extra close button here in order to cross manually without updating or inserting new employee record along with that we have to have a pop-up dialog heading displaying insert employee or update employee based on the current operation in order to display both heading and close button we will be using mat toolbar which we have used for this angular material heading here okay so back to the component HTML which is here employee component HTML so first of all we will add a mat to bar element here inside that first of all we need to add the title for pop-up dialog so here we go we will display either modify employee or new ample based on the condition here if the value inside the key property which is the hidden control in the form if it is not a null value we will display a modified employee otherwise we will display a new employee now after them we want to show the close button to close the pop-up dialog so here it is inside the button we have a material icon we have set tab index as minus 1 so that the force element which get focused after opening the pop-up dialog will not be this close button it will be the first name itself for that purpose we have set tab index as minus 1 and finally we have added this click event with on cross function which we have already defined inside this tab script file here now in order to position this heading and close button in left and right respectively I will add a span to fill this space in between them now let me save all of these modifications here back to the application now let's try create button do so here we have the customized pop-up dialog in order to dismiss this pop-up dialog manually you can click this button here now let's try the Edit cooperation here instead of new employee here we have modified employee now I want to customize this close button here with few CSS rules so back to project then opens - door ceases I will add few CSS rules here save then back to the application now let's try once again so here it is now here we have the final operation which is delete we can implement that using this trash icon here so back to employee list component HTML here into the Delete icon we will add this click event on delete into that function we will pass the corresponding employee dollar key value now let's define this function on delete in corresponding typescript file here on delete with single parameter dollar key inside that we have to do the delete operation for that we have already written a function in the service class that we can see here oh this one delete employee we just need to pass the corresponding employee dollar key value into the function so here we go this dot service dot delete employee into that function we can pass this dollar key here let me copy this and pasting here since delete is a loss of data we have to confirm the operation so I will add this if close here confirm inside then we have to pass the message are you sure to delete this record if you sir confirm the operation we will do the delete operation here after delete operation I want to show a notification saying deleted successfully like we have shown for submission of the form with green message we have done that green success message inside this notification service here so I will add one more function for delete notification here so here we have the function warned with a single parameter MST instead of success class we have added one class here now we have to add the corresponding CSS class inside this tile store CSS here here we have the CSS rules for success message along with that I will add some styles for delete message also now let's call this one function from employee list component here so first of all I will create a notification service object inside the constructor here now we have to add the corresponding import statement for this service class so just use the shortcut hold ctrl then press period then click on the appropriate import statement then back to the function here we just need to do this this dot notification service dot one function can be called so here it is first of all I will add an exclamation mark here then deleted successfully let me save all of these modifications here went back to the application I want to delete this employee delete Kellie so click on this trash icon here then confirm the operation so here we have successfully deleted that specific employee we have shown the notification message here you can download this project source code from the github link given below in video description so in this tutorial we are going to replace default confirm dialog with a customized angular material confirmed dialog it looks like this we have created this angular material pop-up dialog as a result of customizing pop-up dialog in angular material so here we have the same project from previous tutorial currently we are running this project inside my web browser here so we just need to replace this default confirmed dialog with new confirm dialog for that purpose I am going to create a new component inside this project so we can use this ng command ng G for the red sea for component component name will be Matt confirmed dialog hit enter newly created component can be seen here mat confirm dialogue now in order to work with this mat confirm dialogue I'm going to create one more service class so ng g for generate s for service we have to create the service class inside this shared folder here so shared then forward slash we have to create a dialogue service class so we just need to type dialogue here hit and our newly created service class can be seen here dialog service I will delete this spec dot TS file which is for test purpose we don't need that in order to create the new confirm dialogue we are going to use pop-up dialogue component from angular material so in order to work with that we have to import the module which we have discussed in previous tutorial so here it is we have to import this module mat dialogue module now back to this a new service here dialog service inside this service class will open the new customized confirm dialogue so first of all I will import the required class mat dialogue from angular material then I will inject the class inside this constructor here dialogue which is of the type mad dialogue then we will define a new function open confirm dialogue without any parameter inside that we can do this this dot dialogue door open inside this dialogue pop-up we have to open new component which is mat confirmed dialogue so we just need to pass the mat confirm dialogue class here as a second parameter to this function we will pass an object here in order to configure the pop-up dialogue first therefore we will set the width to 390 pixel and finally we will disable the close feature by clicking outside the window or by pressing escape on your keyboard now we have to call this open confirm dialogue function from this delete button click event so we have to inject this dialogue service inside the corresponding component so here it is employee this component now let's inject that dialogue service here so here we have injected as dialog service now we have to add the corresponding import statement so hold ctrl then press P deep then select the appropriate import statement now we have to modify the delete button click event which is here on delete function for now I will just comment these lines here then we can do this this dot dialogue service dot open confirmed dialogue function can be called finally we have to do one more thing in order to open a component in pop-up dialogue like this we have to add the component class inside the app module tortillas file so let me copy this class name from here then open app module tortillas then we have to add that inside this entry components array here let me save all of these modifications here then back to the application now click on delete button here so here we have the new dialogue inside that we have shown the HTML from Matt confirm dialogue HTML so back to the project then open corresponding component HTML which is Mac confirm dialogue component dot HTML instead of this default texture I will add a div inside that we will add another day with this custom class content container first of all I will add the close button for this confirm dialog box for that we have a matte icon with ID close icon after that we have the content for this confirm dialog that can be shown inside this pan here with custom classes content span and full width now we have to have two buttons in this case question will be something like this are you sure to delete this record or not in order to answer the question we have two options yes or no so let's add the icons here we have the no button with ID no button and we have the yes button with ID yes button now we have to define CSS rules for these custom classes here before that I want to add one custom class particular to this confirm dialog here panel class is equal to confirm dialog container so this class will be added to the outside container of the confirm dialogue it will allows us to customize the pop-up dialogue as per our choice so let's add CSS rules for these classes opens test or CSS so here it is so here we have defined CSS rules for new custom classes let me save all of these modifications here now back to the application now click on this delete icon here so here we have the new confirm dialog we have to show a message inside this confirm dialogue it will be here are you sure to delete this record or not let me copy this and paste inside this content and save then back to the application click on delete so here it is are you sure to delete this record or not instead of hard-coding this content inside this span here I want to pass that from this Employee List component here for that I will copy this content question and pass through the function parameter here open confirm dialog now we have to update this function open confirm dialog I will add a new parameter MSG now we have to pass this parameter MSG into this mat confirm dialogue that we can do with this property here data inside that we have another object containing single property message is equal to M s G so here we have passed data property containing message of the dialogue in order to receive this data inside this component mad confirm dialogue component we have to do a few things here so data passed to this component through dialogue will be of the type mat dialogue data so we have to import the corresponding class here so here it is mat dialogue data from angular material now we have to inject this data into this component so we have to import this inject class also now we just need to do this add inject for this cross mat dialogue data and we have the property data inside this data object we have the message that we have passed from this dialog service so now we have to show that message inside this component HTML here so I will do that with string interpolation that dot message that we save all of these modifications here then back to the application click on delete button so here it is now I will add the click even for this close icon here so back to the component HTML mat conform dialog component HTML when we click on this close icon here we will call the function close dialogue and we have to define this function inside the typescript file here on close dialogue in order to close this pop-up here we have to have the reference for this pop-up dialog for that we have to import the corresponding class here which we have done in previous tutorial math dialog rough now we have to inject a property of this type here mat dialogue graph for this component mat confirm dialogue component now we just need to do this this dot dialogue rough dot close function can be called okay now let me save all of these modifications here then back to the application click on delete icon and close this window now what about these two buttons no and yes for both of these buttons here when we click on them we have to close the window for that we can add this directive here mat dialogue closed same for this yes button also now we developers must know whether user selected yes or no for that purpose along with this directive here from this no button I will return false and from this yes button I will return true and we click on this close button here we will close this window along with that they will return false it would be same as that of this node button here so in order to return false from close button we have to do this inside this cross function we can return false now how can we receive these boolean values true or false from this employee list component we have opened this confirmed dialogue dialogue service so as a result of this open function here it will return a mad dialogue graph so we have to return that object and we can receive that inside this employee list component here so as a result of this function we will get a mad dialogue graph then we will call this function after close function can be called so this function after closed will return an absorber so we can subscribe to that observable here subscribe inside that we have an error function with single parameter response so whenever user response to this confirm dialogue here it will invoke this callback function inside this subscribe here in order to see the response inside this callback function I will log this response let me save all of these functions here then back to the application now let me open the console here now let's try this delete button here I will close this window so here we have the response false now let's try this s button so here we have the response true now we have the no button so here we have the response as false so we have to delete this record when you so click on this yes button here so in that case response will be true so here we can do this you will have and if course if response is true we will do the delete operation first of all we will delete the employee then after that we will show the notification like we have done in previous tutorial now let me delete these codes here save then back to the application I want to delete this employee Gavin click on yes so here we have successfully deleted the employee now I want to position this confirm dialog in top of the page for that we can do this we will use the property position and we will set the table as Pizza so this dialogue will be aligned with a gap of 10 pixel from top let me save this back to the application so here we have the confirmed dialogue with right position that's it guys here we have created a beautiful confirmed dialogue in angular material using pop-up dialog you can download this project source code from the link given below in video description all of the video links from this series is given in video description if you found this video helpful please thumbs up this video for our some videos like this please please subscribe to Cod affection please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 35,411

Rating: 4.9087248 out of 5

Keywords: angular material tutorial, angular material table, angular material popup, angular material toast, angular material form design, how to use angular material, drop down in angular material, angular material with firebase, angular material datatable paging sorting and filtering, CodAffection

Id: 8e_nIPFc_7I

Length: 132min 21sec (7941 seconds)

Published: Wed Jul 03 2019