Learn Angular Material - Full Tutorial

hey guys my name is vishwas and welcome to a brand new tutorial series on angular material in this introductory video let's take a look at what is angular material the prerequisites for this course and also the course structure alright let's begin what is angular material angular material is a UI component library what that means is angular material provides us with components to build awesome user interfaces in QuickTime it is also an implementation of Google's material design specification just like how we have material UI for react beautify for view we have angular material for angular the goal here is to learn how to use the library components to build clean and elegant UI now before we get started let me quickly run you through the prerequisites as always HTML CSS and JavaScript go without saying in addition to these you also need to have a knowledge of angular you don't have to be an expert by any means but some basic knowledge is absolutely necessary if you are feeling rusty make sure to go through the angular tutorials on my channel before starting this course now as of this recording the current major version of angular and angular material is seven with new releases there might be minor tweaks but what you will learn in this series will still hold good so you can watch this entire series without any hesitation alright how are we going to proceed with this course first we will learn how to add angular material to an angular application then we will discuss about typography in angular after that we will take a look at the different components that make up the library the components fall under six major categories we have buttons and indicators navigation layout from controls pop-ups and models and finally data tables we will not take a detailed look at every single one of them but we will cover the important ones by the end of this course you will have a good understanding of how the individual angular material components work you can then use that knowledge to build angular applications that suit your requirement all right then let's get started in the next video in this video let's see how we can add angular material to an angular application now before I show you how to do that I want to tell you that for this course we will be closely looking at the documentation and that is for two reasons first one is to stay updated with the changes there will be future releases of angular material and it is safe to rely on the documentation as it is constantly updated the second reason is to know the directives that have to be used for the different components when we start writing code we need to import certain components and it is next to impossible to know the component names without referring to the documentation so make sure you have a tab open for the dogs while you are following the videos alright with that let's see how to add angular material to an angular application from the navbar I am going to navigate to the guides section of the documentation here you can see the getting started heading as well as the schematics heading both these sections contain information on how to install angular material depending on the version of your angular application the getting started section contains about six different steps which you have to go through to set up material in your angular application and this is only if your project is below version six for this series we will be working with angular version seven so I will demo how to add material with CLI schematics which is valid for angular version 6 and above now in the terminal when I run the command ng - - version you can see that I have angular CLI version seven if you are at a lower version please make sure to update it before creating a new project alright now what I have done is created a brand new project using the command engi new material - demo material - demo is the name of the project we will be working with and of course I have opened the project folder in vias code next to setup angular material make sure you navigate into the project folder and run the command ng had at angular slash material when we run the command it is going to ask us an option for the team I'm going to stick with indigo pink next it checks with us for hammer jeaious for gesture recognition I will simply go with yes for now next browser animations again yes and that is pretty much all you have to do you are ready to start using angular material in your application and this was possible because angular material is packaged with CLI schematics what that means is that the angular team provided us with a single command that will handle setting up material in your application let's take a look at the differences to see what changes were made by running the command first up angular dot JSON the only difference is the inclusion of a CSS file in the Styles array and this is the indigo pink theme which we opted for the next file is package dot JSON here you can see that angular cdk and angular material have been added to the list of dependencies next we also have updates to the package lock dot JSON file and then we have index dot HTML here two references have been added one to material icons and the other to Roboto font in mindo TS there is the inclusion of ham urges in style.css there is some CSS reset that has been added to the body tag finally in AB dot module OTS we are importing the browser animations module and adding it to the imports array now if you're doing this manually make sure to add it after the browser's module so the command basically adds project dependencies includes them in the module and sets up the style and theme for your angular application to test if it is actually working let's use materials button component there are three simple steps first step imported in app dot module dot TS import math button module from angular slash material second step add it to the imports array third step use it in the HTML so in AB dot component dot HTML wipe out the existing HTML and add a button tag with the text hello world but also with the directive mat - button now let's run the application in the terminal run the command ng serve - OH in the browser you can see that we have a button that says hello world which is styled with angular material let me change the directive to mat raised button go back to the browser and you can see the subtle difference the button is now raised so the material library is working perfectly fine you're probably thinking how would I know to use math button or math raised button right well it's pretty simple I refer to the documentation I can mention it is kind of a necessity for this particular course there is just no way that we can know what directive has to be used for which component this was a simple getting started video and that is the reason I used a simple button component without referring to the documentation in the upcoming videos we will be referring the documentation more often all right there you go angular material working in your angular application what we had to do was run the command in G and at angular slash material in the CLI project in the last video we saw how to add a material button component to our application there were three simple steps first step is to import it second step is to add it to the imports array and third step is to use it in the HTML although this is perfectly fine there is a better recommended approach and that approach is to create a separate module that deals with importing and exporting material components so in the terminal that is used the CLI to generate a new module ng G for generate m4 module for the by name of the module which we will call as material once the command completes you should have a folder called material inside the app folder and within the material folder you should have material dot module dot TS in this module we are only concerned with importing and exporting material components so remove common module as well as the declarations array instead add an exports array now let's move the imports from app module to material module so from AB dot module dot es remove the import statement and add it in material module make sure to remove it from the imports array as well next in material module create a constant material components and then include the map button module next add this constant to the imports array and the exports array finally include the material module in the app module in the imports are a material module which is going to auto import the material module from material dot module dot TS now let's restart the server ctrl C and then ng serve - OH and you can see that the raised button still has the same material styling so what we have done is extracted material into its own module so from the next video to use any component all we have to do is import it and add it to the material components array this approach isolates material code and also keeps the app module nice and clean in this video let's discuss about typography in angular material now typography basically deals with the style and appearance of text on your website if your website has text content with way too many styles or font sizes it kind of spoils the UI to address this concern angular material provides typography levels each level has a definite font size font weight and line height let's take a closer look at the different type a graffiti belts to create huge headers in the web page we can make use of the material display classes now there are a total of four display classes so let me create four div tags one for each display class in fact that we simply copy paste the code and then explain it so we have four dip tags each with a different class the topmost one is matte display for my display three two and one if we save this and take a look at the browser you can see how they appear on the web page display four has the largest size and the size decreases as we move towards display one when you have to really capture the users attention this is probably the way to go next we have four more classes that correspond to each one H 2 H 3 and H word tags for a section of your web page again let me copy pasted for more div tags we have the mat headline class which is for an h1 tag mat title which is equivalent to an h2 tag subheading 2 for h3 and subheading 1 for H 4 if you save the file and take a look at the browser you can see the four classes in action so these are also kind of headings but smaller compared to the display classes the display classes you probably use only once at the very top of your page and the section headings like headline can be used multiple times once for each section alright next we have body text and caption again let me copy paste the div tags so for the body content in your page that is for text other than headings you can make use of body 1 and if you need the text to be in bold use body 2 and if there is a caption use the caption class so Matt body 1 Matt body 2 and Matt caption if you take a look at the browser you can see them in action body one body two which is bold text and then the caption and the final class we have is the typography class itself and what it does is it allows h1 to h4 tags to be used as you would normally you just have to wrap them in material typography class again let me quickly copy paste the div tags so you can see that we have a div tag with class matte typography and then within this div tag we can use the regular h1 to h4 tags if we save this and take a look at the browser you can see that it is exactly the same as headline title and subheading classes so this is about typography in angular material a set of classes concerned with the style and appearance of text in your application in the next video let's discuss about one of the most fundamental HTML elements which is the button element thank you guys for watching over to subscribe I'll see you guys in the next one in this video let's take a look at angular material buttons angular material buttons are basically native button tags or anchor tags enhanced with material design we had a quick look at material buttons in the getting started video now let's take a more detailed look to make use of material buttons we need to import the material button module so in material dot module dot TS import the mat button module and added to the material components array now let's go back to app component dot HTML to create the simplest of material buttons we add the mat button attribute so a button tag with the math button attribute save this and take a look at the browser and you can see a material button now let's take a look at some of the variants the first variant is a raised button the attribute is mat raised button the mix variant is a flat button the attribute is mat flat button and we also have a variant that applies just the outline the attribute is Matt strobe button let's save this and take a look at the browser the buttons are too close to each other so let's add some margin in AB dot component dot CSS margin-right three ram now if you go back to the browser you can see the different buttons raised flat and strode apart from these we also have circular buttons in angular material there are again three variants the first one is an icon button the attribute is mat icon button the second variant is a fab button the attribute is mat fab lastly a mini fire button with the attribute mat mini fab save the file and let's take a look at them in the browser so we have icon button which is a circular button with a transparent background fab button which is a circular button which defaults to accent color of your theme and the mini fab button which is just a smaller version of the fab button so these are the variants for circular buttons next let's talk about button colors when it comes to material there are three colors we talked about primary accent and warned colors w AR n warned to apply the color we make use of the color attribute on the button element let me copy paste three buttons and add the colors color is equal to primary the text is primary color is equal to accent the text is accent and finally color is equal to war and the text is war if you take a look at the browser you can see the button text in different colors primary accent and warm how the colors apply are based on the variant of the button if we were to apply the same colors to raised buttons for example you can see the difference primary accent and worn so based on the type of the button the color is added to the element the last thing I want to show is how to disable the ripple effect right now you can see that when I click on the button there is a ripple animation effect if you don't like it for some reason you can add the disable ripple attribute to the button element so on this third button which is for warm I am going to add disable Ripple if I save this and go back to the browser only on this button when I click you can see that there is no more ripple effect ripple effect no ripple effect now those were a lot of attributes to keep in mind so let me point you to the documentation go to material dot io and click on components and then scroll to the button component click on examples and click on the code icon here you pretty much have all the code required for you to experiment with material buttons and if you visit the API tab you can see what is the module that needs to be imported so angular material provides six variants and three colors that can be applied to the native button element buttons kind of make up a part of few other material elements so make sure you have a good knowledge of them with this understanding let's take a look at button toggle in the next video alright guess let's take a look at the button toggle element in this video button toggle is basically an element with the appearance of a button and can toggle between on and off states to get started we need to import Matt button toggle module from angular material and add it to the material array import it and add it to the material components array now in the HTML we can add Matt button toggle with the text toggle if you save the file and take a look at the browser you should see a toggle button click on the button a toggle say the on state click again and it toggles to the off state now you might want to use the state of the toggle button to perform some operation to get hold of the toggle state add a template reference variable and then access the checked properly on that variable toggle button is going to be the template reference variable and then interpolate toggle button dot checked if you now take a look at the browser you can see that the value is false click on the button and the value is true now the button checked value is false by default we can change that though by adding the checked attribute to the toggle button element if you now take a look at the browser you can see that the button appearance is that of the on state and the checked property value is now true we of course still have the ripple effect when we click on the button to disable it add the disable ripple attribute you can see that the ripple animation is now gone it is also possible to disable the button itself by adding the disabled attribute if I now head back to the browser and try clicking on the button nothing happens the button is disabled and cannot be toggled between on and off alright these are some of the properties on a button toggle element now although these elements can be used individually they are typically grouped together and presented as better alternatives to radio buttons or checkboxes for example let's say you have a list of front-end technologies let me show you how to display them using the button toggle element to create a group of button toggle elements we use the Matt button toggle group directive within the group we can add the individual button toggle elements angular react and view each of the elements need to have a value attribute which will point to the overall value of this group so value is equal to angular react and view now to access this group's value we need to create a template reference variable and assign Matt button toggle group the variable name is toggle group and to this we assigned Matt button toggle group now we can interpolate toggle group dot value to access the value of this toggle button group let's save this and head to the browser and you can see that we have the button group I click on the button and the group value is displayed angular react and view by default the toggle group behaves like radio buttons and only one item can be selected at a time if you want the behavior to be that of a checkbox where multiple items can be selected you simply need to add the multiple attribute to the toggle group element so over here I'm going to add multiple if you now go back to the browser you can see that we can select multiple elements and the value is now a comma separated list of the selections angular react view just angular and react just angular or all three now what we have seen is how to get hold of the value in the HTML you can also listen to change events and execute some code written in the component class as well you can also get hold of the template reference variable in the class component and perform any required operation I do have a small series on angular component interaction where I go in detail about using reference variables within the component class so please do take a look at that if you have a necessity but this is pretty much how you work with the button toggle element in angular material in this video let's take a look at the simplest way to use angular material icons first make sure you have a link to material icons in your index dot HTML this right here next import the mat icon module from angular material and add it to the material components array by including Matt icon module we can now use the Matt icon component so in the HTML Matt icon in between the opening and closing tags we need to specify text that corresponds to an icon but the question is what text do we specify the map icon component accepts material icon fonts so in the browser go to material dot io / tools slash icons and here you can see all the material fonts available you simply grab the text from one of the icons and paste it as the inner HTML to the matte icon tag if you now go back to the browser you should see the icon being displayed so you can select any icon from the list and just include the text in the matte icon component to add a color we use the color attribute with either primary accent or born as a value which is retrieved based on your theme so if I add color is equal to primary go back to the browser you should see the icon with the primary color which in our case is indigo now you can also use your own SVG's and there is a detailed explanation on how to use them as well so if you go to the material dogs components under buttons and indicators there is icon and over here there is a good amount of explanation on using SVG's but then again material font has tons of icons which might be more than enough let's take a look at material batches in this video if you work with bootstrap badges should seem familiar to you they are basically small status descriptors for UI elements for example if you have to display notifications for a user or the number of unread messages in your inbox badges are the way to go so let's see what is possible with angular material badges in this video to be able to use them we first need to import the badge module in material dot module ts import mat badge module from angular slash material slash badge and then add it to the material components array now let's create our first badge in AB component dot HTML I'm going to include a span tag with the text notifications to add a badge to the span tag we make use of the mat badge attribute so mad badge and this attribute is equal to the value you want to indicate let's go with five if we save this and take a look at the browser you should see the badge in action the small circular element on the top right of the span text now this is the most basic badge you can have let's see how to customize this and let's start with the position by default a badge is placed above and after the element it is associated with that is to the top right we can control the position using the Matt badge position attribute so back in the HTML I'm going to make three more copies of this div tag and I'm going to specify the Matt badge position attribute below and before below and after above and before let me also add some margin to the div tags to make sure that there is enough spacing between the elements so div margin 3 REMS now if you save the files and take a look at the browser you can see the different positions above and after below and before below and after above and before some at badge position attribute to control the position of the badge next let's talk about badge sizing we can specify the size using the Matt badge size attribute the possible values are small medium and large with medium being the default value I'm going to make three more copies of our notification badge and for the first one I'm going to add Mac badge size is equal to small the second one medium which is also the default and for the third one large if we now save the file and take a look at the browser you can see the badges which are small medium and large alright next we have badge coloring the badge background color can be set using the mat badge color attribute possible values our primary accent and born with primary being the default value the color of course is determined by the theme your application is using so back in vs code I'm going to make three more copies of the original notification badge for the first one I'm going to add math badge color is equal to primary which is the default for the second one it is going to be accent and for the third one it's going to be warned if we save this and take a look at the browser you can see primary accent and worn colors based on your theme now you might have noticed in all the notification badges the badge overlaps with the text the overlap lag though can be controlled as well we specify the Matt patch overlap attribute and set it defaults back in vs code on the last badge I'm going to add the attribute Matt batch overlap is equal to false if you go back to the browser you can see that the batch doesn't overlap with the text anymore in fact material documentation advises us to overlap badges for icons and not for text for example if you have the inbox icon then overlapping might be a good choice for text however try avoiding overlap as much as possible finally let's talk about binding values and also conditional rendering the value for a batch is usually stored in a class property to bind the value we simply use property binding so I'm going to open app component es and over here I'm going to create a new property notifications is equal to two and then in the HTML on the very first badge I'm going to have property binding on the mat badge attribute so square brackets for property binding and the property we want to bind to is notifications this property right here so now if we go back to the browser the very first batch now indicates - now sometimes you might also want to conditionally render based on the number of notifications for example when notifications is zero it doesn't really make sense to indicate that we rather hide the badge itself we can do that using mad badge hidden attribute so back an app component I'm going to add the condition property binding with mat badge hidden and this is going to be equal to the condition notifications is equal to zero now if we take a look at the browser you can still see the badge to go back to vs code change the value to zero and you can see that the is now hidden that is how you conditionally render a badge in angular material using the mad badge hidden attribute alright that's pretty much what I have about badges let me quickly point you to the documentation so go to material dot io components under buttons and indicators there is badge and if you go to the API tab you will know what has to be imported let's take a look at the progress spinner in this video first let's import the module Matt progress spinner module included in the material components array of this module basically provides us with two spinner components Matt progress spinner and Matt spinner the first one Matt progress spinner is a determinate spinner which has a value attribute that can be between zero and hundred so Matt progress spinner with the value attribute is equal to let's go with 40 if you take a look at the browser you can see a spinner that is at 40% value we can also specify the value as 0 in which case you cannot see any spinner at all and a value of 100 which shows the complete spinner you can also bind to the value attribute programmatically to indicate any progress that has to be conveyed to the user now a more common use case of the spinner is the indeterminate spinner or the spinner that never stops spinning for that we make use of the Matt spinner component if we now save the file and take a look at the browser you can see that we have a progress winner that spins indefinitely you would want to use this to indicate to the user that something is running in the background and the UI is busy for example if you are loading data it is a good idea to show the spinner and then hide it when the data has loaded let me mock the loading of data with a button click so I'm going to go back to AB dot component dirtiest and create a new property show spinner and initialize it to false I'm also going to define a method load data and in this method initially we are going to set show spinner to true this Dodger spinner is equal to true and then we use set timeout to set it back to false after five seconds so error function this dot shows spinner is equal defaults in the HTML let me use the ng if condition with show spinner and also create a button that calls the load data method and gif is equal to show spinner and a button load data on-click this is going to be load data now let's go back to the browser and initially you can see that the spinner is hidden I click on load data and the spinner appears this indicates to the user the data is being fetched and after five seconds the spinner disappears which again can indicate that the data has been loaded now ideally you want a separate component with more styling like an overlay and a z-index so that nothing else can be clicked when data is being loaded or even a form being submitted and also by default the color is set to primary color of the theme but again like other components you can set the color attribute to accent or warn as well so mad spinner color is equal to accent and now we have an accent color spinner so that is about the progress spinner now similar to the progress spinner there is also the progress bar indicator in angular material it works almost the same as progress spinner so I will leave it up to you guys to experiment and understand how it works well that is about buttons and indicators in angular material from the next video let's take a look at the different components related to navigation let's take a look at navigation components starting with the toolbar typically the toolbar displays information and actions relating to the current screen it's used for branding screen titles navigation and actions in this video though we will only focus on how the toolbar can be used as a navbar now the first step is to import the material toolbar module in material module dot TS in the import statement ad mat toolbar module also included in the material components array now that I think of it the re name is slightly misleading so I'm going to replace material components with the name just material all right now that we have imported the module we can use the component in the HTML so in AB component dot HTML the component is mat toolbar within the toolbar I'm going to add a span tag that says code evolution if you now save this and take a look at the browser you should be able to see a basic toolbar we can add the color to this toolbar using the color attribute the color attribute accepts either primary accent or worn as its value let's go with primary if you head back to the browser you should be able to see a primary color toolbar in your application now let's see how to convert this basic tool bar into a navbar anavar typically consists of the brand title on the left and a group of links on the right Mindi convert our span tag into a div tag which is going to be our brand code evolution I'm also going to add another div tag with a set of links I'm going to add three span tags one for home one for about and one for services if you save the file and take a look at the browser you can see that it doesn't exactly look like a navbar but all we need is to distribute the space in the toolbar in between the title and the links so in the CSS which is AB dot component dot CSS I'm going to add a class navbar and specify justify content to be space between let me also add some spacing between the span tags padding right one Ram finally add the nav bar class to the toolbar so in AB component dot HTML on the mat toolbar component class is equal to nav bar now if we take a look at the browser you should have a proper navbar brand on the left and a set of links on the right and the styling is completely up to you but a toolbar is what you need to use to create a nav bar in angular material in this video let's take a look at side nav and angular material the first step as always is to import the module say material module dot es import mat side nav module and add it to the material array now we can add the side nav to our application to set up a site now we use three components the first one is Matt site nap container which acts as a container to the site nav as well as the main content within the container we have mat side nav which represents the site content and then we have mapped site nap content which represents the main content it is important that the site content and the main content are placed within the container if you don't want some elements to be affected by this container for example header and footer you can place them outside the sitemap container all right if we now save the file and take a look at the browser the output is not quite what we expect we can see the main content for the site now is not seen let me tell you that this is the expected behavior site nav is always hidden by default there are a couple of ways to open or show the side nav the simplest way is to add the opened attribute on the mat side nav component if you now say the file and take a look at the browser you should be able to see the site now as well the UI though is not clear so let me add some basic styling back in vs code and AB dot component dot CSS I'm going to add mat a side nav container has a height of a hundred percent mat side nav and mat side nav content let's add some padding and finally just for the side nav I'm going to add a background color light coral and a width of 200 pixels if we now take a look at the browser it is much more clear the site now appears like an overlay on the main content and when I click outside the side nav it closes and we can see the main content now once we close it though there is no way to open it again so rather than setting the opened attribute like here let's bind it to a property which we can then control using a button we will be using two-way binding so the first step is to import the forms module in app module so open up dot module dot ES in Port forms module and add it to the imports array now let's go back to two-way binding an AB component dot es which is the component class I am going to create a new property called opened and set it to false next in the HTML bind the opened attribute to the opened property and create a button that will toggle the opened property value so for two-way binding we use banana in a box in tax so square brackets parenthesis and close it this is going to be equal to the property we just created opened next as part of the main content I'm going to add a button the text is going to be toggle opened and on click of this button so click handler we simply toggle the open value opened is equal to not off opened if you now say the files and take a look at the browser the sitemap should be initially hidden because we have initialized it to false I click on the button and the side nav is shown click outside the side nav and it automatically hides so this is the first method to show or hide the side nav before we take a look at the next method I want to quickly show you the different modes that can be applied to a side nav the mode for a side nav can be specified using the mode attribute on the mat side nav component the default mode is over mode is equal to over and this is the mode we have seen so far if you go back to the browser you can see that there is no change from what we have already seen the site now floats over the main content which is covered by a backdrop the second possible value for the mold attribute is push so I'm going to change over to push let's see how this works in the browser I click on the button the site map appears but this time the site map pushes the primary content out of its way covering it with a backdrop now the final possible mode is side so mode is equal to side in this mode the side nav appears side-by-side with the main content shrinking the main contents width to make space for the side nav so the three possible modes are over push and side I'm going to stick with site for the rest of this video now back to opening and closing the side nav we have seen the first method which is using the opened attribute the second way to open or close the side nav is by invoking the open or close methods on the side nav itself for this method I will create a template reference variable on the mat side nav component hash symbol and side nav now I can create two buttons that will call the open and close methods on this template reference variable button open on click it is going to call side nav dot open similarly button close on click side nav dot close let's save this file and go back to the browser I click on open and the side nav opens I click on close and the side nav closes so this is the second method the third method is to simply toggle the side nav by calling the toggle method this is also the approach you might want to take when you have a hamburger icon for example I will create another button in the main content and the text is going to be toggled on click of this button I simply call the toggle method on the side nav reference variable side nav dot toggle if I now go back to the browser click on the toggle button it opens I click again it closes so these are the three methods and if at all you want to perform some action on open or close off the side nav you can listen to the opened and closed events now back in vs code in AB component Diaz I am going to create a method called log which accepts a parameter called state and simply logs that to the console now in the HTML we can listen to opened and closed events and call our log method passing in the appropriate value so on mat side nav listen to opened event and call the log method passing in the string opened similarly on the closed event called the method passing in the string closed if you now head back to the browser open dev tools click on toggle you should see the message opened toggle again you should see the message closed now I am simply logging a message but you can perform any action that seems fit for your application so that is about the side nav in angular material all right let's take a look at menus in this video basically a menu displays a list of choices on a temporary surface the choices appear when users interact with the button action or some other type of control now as always the first step is to import the appropriate module so in material dot module Diaz I'm going to import mat menu module and add it to the material array now let's go to app component dot HTML and over here to create a menu we use the math menu component to specify the choices for a menu we use the button elements with a math menu item attribute button fronton is the text and we add the mat menu item attribute similarly let's also have backand as a menu item if you save this and take a look at the browser you're not going to see anything that is because by itself the Matt menu element does not render anything it has to be triggered from a UI element or programmatically so let's add an element to open the menu I'm going to add a button element and add the attribute mat flat button for some styling the text is going to be menu now that we have the element we need to associate the menu with this element and that is a quick two step process first step on the mat menu component create a template reference variable and assign to it the mat menu directive up menu is the variable name and assign mat menu second step link the button with the template reference variable using the mat menu trigger for directive so on this button mat menu trigger for and then assign the reference variable app menu in simple English hey there is a menu called app menu which can be triggered by this menu button now if we say the file and take a look at the browser we have the menu button click on the button and you can see the menu so this is how you create a basic menu next let's see how to create a nested menu the first step is to create the submenu and we are going to repeat the process of creating a menu and attaching a template reference variable so mat menu I'm going to add three menu items the first one is going to be angular the second one react and the turbulent view on the mat menu component I'm going to add the reference variable this is going to be called sub menu and we assigned the map menu directive all right we have created a sub menu and this is a sub menu for the front end choice in the main menu so all we have to do is add the trigger directive again on this item map menu trigger for submenu in simple English hey this front-end menu choice is going to trigger this submenu if we save this and take a look at the browser you can see that we have the nested menu you don't have to click on front-end when you hover on the choice the submenu is opened angular react and view and one of the useful options when it comes to a menu is with respect to the positioning of the menu we have X position and y position attributes so on the map menu component we can specify X position and white position X position can take values of before or after and Y position can take values of above or below let's go with after and above if you take a look at the browser click on menu you can see that the menu opens to the right so exposition is working fine but the menu still opens below the button and that is simply because there is no space available at the top let's reposition the button in the CSS file let me add a class Center margin is going to be 10 REMS back in the HTML let's add the class to the button element now if we go back to the browser and click on the element you can see that the menu opens to the right and to the top so x position and y position before after for exposition about and below for y position these attributes control the position of the menu now the last thing I want to talk about is lazy rendering by default the menu choices are initialized even before the menu is opened that is even before clicking on the menu button the choices have already been said for the menu we can differ initialization until the menu is open using the ng template directive and mat menu content attribute this allows us to have dynamic content as many choices let's see how I'm going to create a new menu Matt menu I'm going to add a reference variable called lazy menu and set it to Matt menu within the menu component we are going to use the ng template directive and within this directive we specify the menu items the first one is going to be a Settings button and the second one is going to be the text logout now what I am going to do is create to trigger buttons to this same menu button the text is going to be vishwas Matt menu trigger four is equal to lazy menu similarly another button that says code evolution and we trigger the same lazy menu if we now save the file and take a look at the browser if I click on Vishwas the menu is not quite opening and that is because we left out the Matt menu content attribute on the ng template tag so let's save the file and try again I'm going to go back to the browser click on Vishwas and you can see we have the menu click on code evolution and you can see that we have the same menu again now what we want is if I click on wish wasps I mean the choice to be logout vishwas and if I click on code evolution I want the menu to say logout code evolution basically we are looking at dynamic choices for that we make use of math menu trigger data attribute so back in the component HTML on the trigger buttons we add in an extra attribute this attribute is mat menu trigger data this is going to be equal to an object let's pass in a name which is vishwas similarly on the second trigger button we're going to pass in name but this time it is going to be code evolution now I've just reformatted this and we have the two buttons still in place one for vishwas and one for code evolution now that we have specified the data on the ng template tag we create a local variable let name is equal to name and in the menu choice we can now use interpolation with that variable double curly braces and name now if we go back to the browser click on vishwas it says log out vishwas and if I click on code evolution it says log out code evolution so what is happening is on the trigger button we specify the map menu trigger data attribute and we specify the name so we are saying hey I know that this button is a trigger for a menu but when I am triggering that menu let me pass some additional information that the menu can use to dynamically render some data now in the map menu component we use the ng template tag and on the ng template tag we specify this name variable that we want to access and that can be interpolated in the button element that is how we have log out vishwas let's add one more property so that we really understand how it works to the trigger data object I'm going to add a new property called hobby for vishwas the hobby is football and for code evolution the hobby is teaching now in the menu on the ng template tag we declare another variable let hobby is equal to hobby and now we can add a new menu choice and bind the hobby so button hobby is mind hobby and let me also add mad menu item if we now save the file and take a look at the browser click on the choise hobby is football click on code evolution hobby is teaching you can see that we have different menu choices for the two elements say menu with dynamic content all right that is about navigation and menus in angular material let me quickly point you to the documentation go to components go to navigation menu API for the module that you have to import and then the examples to take a look at some of the examples you can use in the next section let's take a look at components related to layouts in angular material angular material provides a number of components for laying out elements let's begin with the list component in this video first step is to import the module so in material module Diaz import mat list module and added to the material array now in the HTML we can create a basic list mat list is the component and this component has mat list item as its children if we save this and take a look at the browser you can see that we have a list of items being displayed now suppose you have a list where the list item is just a lot of text for such scenarios we have the dense attribute apply it on the mat list component and it will reduce the font size if you take a look at the browser you can see that the font size has been reduced the mat list module also provides components to create a navigation list the component is mat named list as children to this component you have to specify anchor tags with the mat list item attribute so anchor tag Matt list item attribute and let's just add each ref is equal to a hashtag I'm going to create two more list items about and services if you save the file and take a look at the browser you can see that we have a navigation list a good place for this would be the sitemap component which we learned earlier in the series now it is also possible to create multiline lists and also include material icons I'm going to comment this out and start a new list some add lists and within the Mathis component we are going to have a mat list item within the list item we can add a material icon Matt icon and let's go with home we can then add a heading with Matt line attribute after that a paragraph with a matte line attribute if you save this and take a look at the browser you can see that the list item has two lines one for heading and one for the paragraph we also have the icon and it looks like I've forgotten the attribute on Matt icon so let's add Matt list icon if we save this and take a look at the browser you can see that the list item has two lines one for heading and one for the paragraph we also have the icon to the left let me add another list item I'm going to copy this mat list item component paste it I'm going to change home to folder this is going to be heading 2 and then line to save the file and take a look at the browser we have two items in the list which contain multiple lines now you can see that we don't really have a clear distinction between the list items for that purpose angular material provides another module namely mat divider module so in material module TS let's import it then add it to the material array mat divider module now in the HTML in between the two list items we can add the mat divider component so right after the first list item mat divider now if we take a look at the browser you can see that there is a clear separation between the list items right now we have the list items hard-coded but typically you would use the mg4 directive on an array of data so to create lists you can use the mat list and mat divider modules let's take a look at grids in the next video all right let's take a look at the material grid list in this video the grid list is basically a two dimensional list view that arranged ourselves into grid-based layout now the first step is to import the module so in material Mario Diaz import mat grid list module and added to the material array mat grid list module now we can create a grid list the component is mat grid list and this component requires a calls attribute which specifies the number of columns in the grid let's go with two columns so calls is equal to two as children to this component we specify Matt grid tile components title 1 and similarly let's create three more also to be able to clearly see the grid let's add a background color to the tiles so in the CSS file Matt grid tile background color light blue now if we save this and take a look at the browser you can see the grid with two columns and two rows the question is how did it create the two rows for a grid we always specify the number of columns and the number of rows is determined by how many columns we want and the number of tiles specified since we have 4 tiles and two columns it can fit only two tiles in each row hence it creates an additional row to fit the next two tiles if you were to have five tiles there would be three rows so the number of rows is determined by some basic math of course you can also specify how many rows or columns each tile should take up that can be specified using the row span and called span attributes on tile one if I said row span is equal to two and take a look at the browser you can see that it takes up two rows instead of one similarly if I said call span is equal to two you can see that it takes up two columns instead of one when specifying called span though you need to make sure that it does not exceed the calls attribute if it does it throws an error all right next let's talk about the height of each row in the grid by default the height of a row is equal to the width of a column however you can override this using the row height attribute and you can specify one of the three values the first one is a straightforward value so row height is equal to a hundred pixels take a look at the browser and you can see that each row will be a hundred pixels tall the second option is to specify the row height as a ratio with respect to the column width for example row height is equal to 2 is to 1 this implies that the row height is 1/2 the column width if the column width is 200 pixels then the row height is a hundred pixels take a look at the browser and you can clearly see from each style that the height looks half the width the third option is to fit the height based on the container so row height is equal to fit but this time we also need to specify a height for the container so style height 200 pixels now if we take a look at the browser the rows are fit into the container height of 200 pixels so each row has a height of 100 pixels if there were 4 rows each row would be 50 pixels so as to fit the total container height of 200 pixels all right the last attribute I want to discuss on a good list is the gutter size that is spacing between the tiles we can specify gutter size using the gutter size property let's go with gutter size is equal to 10 pixels if you save the file and take a look at the browser you should now see additional spacing between the different tiles welcome back everyone in this video let's take a look at expansion panels and accordions in angular material expansion panels are basically panels which can collapse or expand to display additional details in a view let's take a look at some examples to get started import matte expansion module and add it to the material array so in material module Diaz imported and add it to the material array now in the HTML let's create an expansion panel the component to use is matte expansion panel every panel must contain a panel header component it is this header which is displayed when the panel is collapsed a header can contain a title and a description we use math panel title to add the title angular fundamentals and mat panel description to add a short description for the panel total duration three hours if you now save the file and take a look at the browser we should have an expansion panel you can see the title and the description as well when I click on the header the panel expands right now the panel content is empty let's go back and add some text outside the header but within the expansion panel I'm going to add a paragraph this is the panel content add course details material also provides an action row component which I'm going to add here mat action row a button tag with the text enroll and Matt button attribute if you now take a look at the browser we have the panel I click on the header and we have the panel content a paragraph tag and the action row which floats the Android button to the right the panel details can be any HTML you wish to and is not limited to a paragraph tag but this is pretty much how you create a basic expansion panel with angular material next let's take a look at creating accordions an accordion is basically multiple expansion panels grouped together let's start off by duplicating the existing panel and changing the header and the description I will change the title to angular material and the total duration to two hours I believe the content and action row as is if you now take a look at the browser we should have two panels the two panels don't work independently of each other let's add the Matt accordion component to convert these panels into an accordion so back in vs code I'm going to add the Matt accordion component and the two expansion panels are children of this component if we now take a look at the browser we still have the two panels but this time when you try to expand the second panel the first one collapses automatically the accordion also adds a bit of margin between the panels which would otherwise not be present now if at all you want multiple panels to be shown at the same time you can set multi is equal to true on the mat accordion component if you take a look at the browser you can see that we can now expand both the panels at the same time and if you notice to the right of the panel header we have the toggle icon if at all for some reason you want to hide this simply add the height toggle attribute on the accordion hide toggle take a look at the browser now it is hidden now there are a couple of methods which could be useful depending on your requirement so I will leave them for you to explore the methods are pretty much like what we have already seen in some of the other components there are methods to open or close the panel's programmatically and also events to know when a panel is expanded or collapsed but this is pretty much the gist on how to create expansion panels and accordions with angular material the next layered component we are going to talk about is cards a cart is a container for content and actions about a single topic first step as always is to import the module so in material module Diaz we're going to import mat card module and add it to the material array now we can create a basic card in the HTML the component is Matt - card and I'm going to add the text basic card if you take a look at the browser you should be able to see a basic card now angular material provides a few predefined sections that can be used inside this mat card component let's take a look at them at the top we usually have a card title so we are going to add mat card title with the text card title after that we have the text content displayed using the card content section so mat card content and I'm going to add the text this is the card content and finally at the bottom we have a section for user actions for example button clicks the component is mat card actions component and within the tags I'm going to add a button that says login and I'm going to add mat flat button attribute now if we save this and take a look at the browser you can see that we have the title the content and the action section now if you want the button right aligned we can do so using the align attribute on the actions section a line is equal to end now take a look at the browser and you can see that the action section is right aligned and this is the basic idea behind cards there are a couple more sections with which you can truly build any card layout that you wish to so let me point you to the documentation in components under layout card and then under examples you can see a full-fledged application of a card it has a header with an avatar title subtitle and image content and actions you can also build your own cards for a registration form a login form pricing section user profiles and a lot more one component to fulfill a variety of requirements now if you want the code for this particular card just click on View source and you have the HTML in this video let's take a look at tabs in angular material tabs basically allow you to organize content into separate views where only one view can be visible at a given time now first step let's import the tabs module say material module TS we're going to import mat tabs module and add it to the material array now we can create tabs in the HTML the component is mat tab group and within the opening and closing tags each tab is represented using the mat tab component each tab will have a label and the content let's add the labels angular react and view and the content as angular content react content and view content now if you save the files and take a look at the browser you should see three tabs one each for angular react and view if you want to know which tab is active at any point of time you can use the selected index property so back in the HTML add a template reference variable on mat tab group and then we can use interpolation to view the property value tab Rev dot selected index if you take a look at the browser you can see that initially it displays 0 because index starts from 0 click on react it changes to 1 and view changes to 2 now if you want to perform some operation when you are changing tabs you can listen to the selected tab change event so back in the HTML bind to selected tab change and as an event handler let's call log change and pass in the selected index in the component class I'm going to simply lock the index to the console now if you go back to the browser open the console and change the index you can see the selected index being logged so when the tab changes you can perform any operation you want to using the selected tab change event the last layout related component we are going to take a look at is the stepper component steppers basically can make progress through numbered steps let's take a look at an example first up import map stepper module and add it to the material array now we can create our stuffer in the HTML there are two types of steppers horizontal and vertical first let's take a look at the horizontal stepper and later on switch to the vertical stepper to create a horizontal stepper we use the mat horizontal stepper component within this component to specify the individual steps we use the mat step component for each step we specify the label using the label attribute and the content goes in between the opening and closing tags let's create three steps we can all relate to that is the checkout process of an e-commerce site so step one is going to be for shipping address step2 for billing address and step3 for placing an order if you now save the files and take a look at the browser you should be able to see the horizontal stepper we have three steps each step has a label and a numeric value indicating the step you can click on the label to navigate to the particular step once you navigate a widow the icon changes from the numeric value to the Edit icon so the stepper basically gives you an idea of your progress through the checkout process right now we are navigating to the different steps by clicking on the label however stepper also supports a previous and Next button out of the box all you have to do is include the map stepper previous and match stepper next directives so for the billing address step let me add both these buttons button back this is going to be Matt button for styling and then Matt stepper previous to go back one step similarly we have the next button if you now go back to the browser we should have these two buttons under billing address if I click on back we go back one step and if I click on next we go forward one step so these are the stepper buttons next let's talk about linear steps if you have noticed we can jump from step one to step two and then to step three without any restrictions in certain situations though you want the user to complete a step before they can proceed with the subsequent steps linear steppers are meant exactly for that to convert a regular stepper into a linear stepper there are two steps the first step is to add the linear attribute to the mat horizontal stepper component linear the second step is to add a completed attribute to the individual steps to each step I will add attribute and set it defaults if you now go back to the browser I click on billing address you can see that we are not navigated to step two step one is not completed and hence we cannot proceed if I change step one completed to true you can see that now we can proceed to step two and since step two is not completed we cannot proceed to step 3 and for this example I am hard-coding true or false but ideally you need to have properly winding with this completed property based on your requirements after the user interacts with the step call a method that will update the completed property to true which will then allow the user to navigate to the next step and if at all you do have a step which is optional you can simply place the optional attribute on that particular step on step two I will add the attribute optional and now if you go back to the browser you can see that we can navigate all the way to step three even though we have completed attribute set to false for step number two you can also see the optional text being displayed for building address all right what we have seen is a horizontal stepper you can also create vertical steppers with angular material simply change mat horizontal stepper to mat vertical stepper and you can see that we have the exact same stepper but this time with vertical orientation well that is about components related to layout in angular material starting next video let's take a look at components related to forms in this video let's take a look at the components related to an input in angular material when it comes to controls like inputs text areas and select we always discuss them in relation to a common wrapper component and that is the form field component so when you talk about an input component you're effectively talking about the for field component and the input component let's take a closer look at both those components in this video the first step is to import the two concerned modules so in material module dot es I'm going to import mat form field module and mat input module make sure to add them to the material array as well now we can create our first input control so in AB component HTML I'm going to add mat form field and within these tags I'm going to add input with a matte input attribute please make note that every input element has to have this form field wrapper and to the input element itself we add the mat input attribute now if I save this and take a look at the browser you can see that we have the most basic material input element let's see how we can customize this input control first up let's see how to add a label to the input field so to add a label use the mat label component so within the mat form field opening tag mat label and let's call this name if you take a look at the browser you can see the label it behaves as a placeholder when there is no text start typing and the label floats to the top and this is the default behavior we can of course change this so on the form field make use of the float label attribute to control the behavior of the label so float label can be set to never in which case the label will not float and is hidden when you type something you can also set it to always in which case the label is floating even when there is no text in the input and you can also set it to auto which is the default value another important point is how the label is presented for a required form field so if I mark the input element as required you can see that now the label has the asterisk automatically appended no additional styling is required if you want to disable this behavior you can make use of the height required marker attribute on the form field so height required marker if I go back to the browser the asterisk is not present for a required field the next thing we can do with the form field is setting a hint label for that we make use of the matte hint component so within the form field I'm going to add matte hint and let's have min five characters if you take a look at the browser you can see that the hint is placed right below the input and by default it is left aligned we can right align it using the align attribute and setting it to a value of end so Matt hint a line is equal to end if you go back to the browser you can see that the hint is now right aligned next let's talk about appearance we can control the appearance of the font field using the appearance attribute by default the appearance has a value of legacy which is what we've seen so far so appearance is equal to legacy we also have an appearance value of standard and this is just an updated version with more consistent spacing so I'm going to copy pasted it and change appearance legacy to standard if I save this and go back to the browser you can see that there is slight difference in how the spacing is for the standard appearance now we have two more appearances fill and outline so this is going to be fill this is going to be outline the fill appearance this plays the form filled with a filled background and the outline appearance shows the form filled with a border all the way around and not just an underline so if I go back to the browser you can see that we have a filled input element and then we also have one which has border all the way around so this is Phil and this is appearance outline finally let's discuss about theming by default the colors reflect the primary color of the theme we can set the color attribute to accent and also warn if required so on the form field color is equal to accent and on this one color is equal to warn if you now take a look at the browser the first control is accent themed and the second is warning themed now on a side note please go through the documentation on how to incorporate other messages with form fields it requires a bit of knowledge on angular forms concepts which I will not be covering here but the documentation is pretty clear so you should be in a good position all right that is about the input control wrapped inside a form field component in the next video let's take a look at the Select control in this video let's take a look at the material select component which is a form control for selecting a value from a set of options the first step is to import the module so in material Model Ts we're going to import mat select module and add it to the material array now we can create our first material select component the material select component just like the input component has to be wrapped inside the form field component some add form field now the component for a select control is map select within the select component we add a label using the mat label component the label is going to be topic every option for this select control is specified using the mat option component so mat option and let's create three of them each option will have the inner text which the user can see and a value which is sent to the server so we are going to have angular react and view all entitled case which can be seen in the browser and the same all in lower case as the corresponding value which will be sent to the server so mat option value is equal to angular value is equal to react and value is equal to view so we have the label and the three options and there is the small correction the label has to be outside the mat select component so the label goes inside mat form field if we save this and take a look at the browser you can see that we have a basic material select control the label is shown by default and when you select a value the label floats to the top now we have already discussed the features of the form field component about labels hence appearance and theming so I'm not going to demo them again in this video instead we're going to focus only on the Select component the first thing you might want to do is track the value of the select control and that can easily be done using two-way binding so back in vs code in the component class create a new property called selected value this is of type string next in the HTML we two-way bind to that property so on mat select we're going to add to a binding so banana in a box value is what we bind to this is going to be equal to selected value to view the value in the browser let's interpolate it now if we take a look at the browser we don't have a value displayed select a topic and its corresponding value is displayed the value displayed reflects the value attribute in the HTML sometimes you might want an option to clear out the selected value in such a scenario use an option with no value attribute so we are going to add another option Matt option and the text is going to be none and there is no value attribute so now if you go back to the browser select a value and the value is displayed select none and the value is reset the next feature possible with material select is grouping related options under a particular subheading and for that we make use of the material option group component so back in vs code I'm going to replace the existing options with a set of options that are saved in my clipboard so what we now have is Matt option for none and then we have Matt option group component with a particular label and this is the label that groups these three Matt option components so angular react view will be displayed under a label of web and similarly ionic and react native will be displayed under the category label of mobile if we save this and take a look at the browser you can see that we now have the topics grouped under sub heading we have none we have web which cannot be selected and then we have the options under web angular react and view similarly we have mobile which is the label that can't be selected and under mobile we have ionic and react native so that is about grouping together the options and it is also possible to although multiple selections all we have to do is add the multiple attribute on the select component so on Matt select add multiple now if you take a look at the browser the options turn into checkboxes and you can toggle selection on multiple options so we now have angular and react and the corresponding value is displayed all right those are some of the properties of angular materials select component and the reason I call the options line by line and not use an mg for directive is simply because ng 4 is not an angular material concept I want to help you understand the possibilities with angular material and how you want to use it or improve it is completely up to you so in the next video let's take a look at autocomplete in angular material in this video let's take a look at autocomplete in angular material step one as always is to import the appropriate module say material dot module dot es we import Matt autocomplete module and add it to the material array now we can create our first order complete let's go back to the HTML and start off with a form tag within the form tag Matt formfield an input element type is equal to text and add the Matt input attribute if you save this and take a look at the browser we should have a basic input element the next step is to create a list of options the need to be displayed as autocomplete options so in the component class I'm going to add three options angular react and view the next step is to make use of the autocomplete component to display this list of options the component for autocomplete is matte autocomplete so right after the input element matte or a complete to specify the options we use the matte option component and to iterate over the list of options we will be using the mg4 directive so on map option ng for is equal to let option of options we are also going to have property binding to value this is going to be equal to option which is from the current iteration and we are going to display the option so basically the value and what we display is going to be angular react or view all right now we have an input element and an autocomplete with options the final step is to link the two together on the order complete component we add a reference variable and assign to it Matt autocomplete on the input element we add the Matt order complete property and bind it with the reference variable so this is going to be equal to auto this right here if you now save the files and take a look at the browser I click on the input element and we get the list of options angular react and view click on an option and it fills the value for us so we have a basic autocomplete up and running now it's also quite possible that your list of options is not simply an area of strings instead it could very well be an area of objects for example an array of four objects which has key value pairs so copy-pasted a new array called object options which is an array of four objects each of the objects have name angular angular material react and view now to display the options correctly in the HTML we interpolate option dot name name is a property in each of these objects and of course make sure to iterate over object options now if we now save the file and take a look at the browser the options are displayed correctly but when you select an option the autocomplete doesn't display that value properly to let the autocomplete know that it has to use the name property to display as value you can specify a display function so back in the component class I'm going to define the display function display function the function gets each object as a parameter I'm going to call the parameter as subject and if at all there is a subject we return subject dot name else undefined now in the HTML on the autocomplete component we add the display width directive and assign the function if you now take a look at the browser the order complete works as expected the display value is angular but the selected value from the autocomplete would be the entire object now this is great but what you might be looking for is the filter autocomplete as you start typing in the text the options are narrowed down now this is where things start to get a little complicated to be able to implement a filtered or to complete you need to have a decent knowledge of angular forms angular forms is out of scope for this series but you can find the complete series on angular forms on my channel if you feel lost please go through that series and then try to understand how a filtered autocomplete works all right the first step is to import reactive forms module and add it to the imports array so in AB dot module dot ES import reactive forms module from angular slash forms and add it to the imports array step to create a form control and link it to the input element so in AB component or TS which is the class component we're going to import form control from angular slash forms and create a new form control so in the class my control is equal to new form control and on the input element form control is going to be equal to my control so we created the form control and linked it to the input element third step we use the help of rxjs to create a filtered list of options so nap component or TS begin by making the necessary imports we need observable from rxjs and map and start with operators from rxjs next we need a new property this is going to be filtered options this is going to be an observable of an array of strings next we need to implement the ng on in it lifecycle hook so from angular slash core we're going to import on in it an app component is going to implement on in it and we can now define the lifecycle hook so ng on in it and within this method we are going to have this dot filtered options equal to this dot my control dot value changes dot pipe start with anything and then map accepting the value this dot filter out the options based on the value then we can define the filter function so private filter is going to accept a value of type string and return an array of strings over here I'm going to have Const filter value is equal to value dot to lowercase and then return this dot options dot filter is going to accept an option and check if option dot to lowercase dot includes the filter value so what is happening here is that whenever the input value changes this code right here is called and in the filter method we accept the filter text and check if the option includes that filter text if it does it returns true and gets displayed if not the option is hidden in the order complete the final step is to iterate over this filtered options in the HTML with the async pipe so ng for let option of filtered options with the ACE pipe and of course this needs to be just option if we now take a look at the browser we should have a working filter autocomplete again if it seemed a bit hard to understand please to make sure you go through the concepts in angular and then revisit this video angular material checkboxes and radio buttons behave exactly the same as native checkboxes and radio buttons the only difference is the styling and animations that are part of the material library let's begin with checkboxes the first step is to import the module same material module Diaz import Matt checkbox module and add it to the material array now we can add a material checkbox in the HTML the component for a checkbox is Matt checkbox and the content between the tags is treated as the checkbox label if we save this and take a look at the browser you can see that we have a checkbox which behaves exactly like a regular checkbox but this time we have the addition of styling and animation by default the label is positioned to the right of the checkbox but we can position it to the left using the label position attribute so back in the HTML I'm going to duplicate this and set label position it's equal to before also going to add a break tag now save this and take a look at the browser and you can see that the label is on the left hand side also if you can notice by default the theme or color of check box is the accent color you can change it to primary or warn using the color attribute so I'm going to create two more checkboxes on the first one I'm going to set color is equal to primary and on the second one color is equal to warn now back in the browser you can see that the first two checkboxes have an accent team the third checkbox has a primary team and the last checkbox has a warranty and that is all there is to customize the check box in angular material native check box with styling and animations now let's take a look at angular material radio buttons again they're basically media radio buttons with material styling and animations as always the first step is to import the module so in material module tortillas we are going to import mat radio module and also add it to the material array now we can add radio buttons in the HTML there are two main components that we deal with radio group and radio button radio buttons are usually placed inside the radio group component so start off with matte radio group and within the radio group we add the radio buttons Matt radio button I'm going to make two more copies of this the first one value is going to be angular label is angular second one is react and finally view now if we save this and take a look at the browser you can see the three radio buttons angular react and view again by default the color of the radio button is set to accent color of the theme you can change it using the color attribute for the first radio button I'm going to add color is equal to primary and for the third button color is equal to warn now if we take a look at the browser the first one has a primary color the second one by default has an accent color and the third one has the warrant color alright that is pretty much about radio buttons in angular material now if you want to access the value of either the checkbox or the radio buttons you can do it with two-way binding make sure to import the forms module and use the banana in a boxing tags for two-way binding for a detailed explanation please go through the angular forms tutorial on my channel you will find everything there is to know about form controls in that series in the next video let's discuss about the date picker in angular material in this video let's take a look at the date picker component in angular material to start off in material dot module dot es we need to import Matt date picker module and Matt native date module from angular slash material after importing add them to the material array now we can create our first date picker a Deepika is basically composed of a text input and a calendar pop-up in the HTML we are going to start off with a form field so mat form field and within the form field component add an input element with math input attribute for this input element we are going to attach an icon which will open the calendar pop-up the component for the icon is Matt date picker toggle and we will add the Matt suffix attribute now that we have the input and a date picker toggle we now need the actual date picker component the component to use is Matt date picker and now the final step is to link all the three together on the date picker create a reference variable my date picker on the input element add the Matt date picker property and bind it with the reference variable my date picker finally on the date picker toggle add the fault property and bind to the reference variable again my date picker if we now save the files and take a look at the browser we should have an input element suffixed with an icon when you click on the icon a calendar pops up with today's date selected when you click on the date the value is saved to the input element you can also go back and forth between different months or also directly jump to a particular year you can even enter a date in the input element let's go with April 6th 2019 and you can see that the date is selected so this is a basic date picker in angular material now let's take a look at the different configurations possible for this date picker the first one is regarding the starting view of the calendar by default it will open the month view we can change it using the start view property so on the map date picker component start view and you can set this to year in which case it displays the months of the year for you can also set it to multi-year in which case it displays multiple years another typical requirement when working with date pickers is setting a minimum and maximum date that the user can select we can easily do that with the min and Max properties going to remove this start view property and in the component class I will create two date objects min date is today's date and Max date is 2019 3:10 the parameters are year month and date also please make a note that the month starts from 0 so we have the max date set to April 10th 2019 now that we have the min and Max dates we can bind it to the input component on the min and Max properties so on an input element min is going to be equal to min date and Max is going to be equal to max date if you now take a look at the calendar you should be allowed to select dates starting from today's date till April 10th you will not be able to select any other dates now another requirement sometimes is when you have to filter out certain dates for example let's say a user should not be able to pick Saturdays and Sundays you can do that while using the Matt day picker filter property of the date picker input so in the component class you will need to create a filter function date filter is going to accept date and then we are going to create Const day is equal to date dot get day to extract just the day and then we return day is not equal to zero and day is not equal to six we are basically preventing Saturdays and Sundays from being selected now in the HTML on the input element I'm going to remove min and Max and said Matt date picker filter is equal to our function date filter if we now go back to the calendar you can see that all the Saturdays and Sundays are disabled you can select only the weekdays all right that is pretty much the basics of date picker in angular material let's take a look at tool tips in this video to get started let's import the tool tip module so in material module Diaz import math tool tip module and add it to the material array next in the HTML let's create a simple button and then associate a tooltip with that button button the text is going to be hello we are going to add Matt rais'd button as an attribute for styling and then for the tooltip we add Matt tooltip this is going to be equal to welcome to code evolution if we save this and take a look at the browser you can see that when I hover on the button we get the tooltip welcome to code evolution and by default the position of the tool tip is to the bottom of the element that is below the element the position can be controlled using the Matt tooltip position attribute you can specify before/after above or below let's go with Matt tooltip position is equal to after if you save this and go back to the browser you can see that the tooltip is placed after the button element now if there is no space the tooltip is placed in the opposite direction for example if I specify above in the browser there is no room for the tooltip to be placed above so the tooltip is placed below and if I specify before there is no space to the left so it would be placed after which is to the right it is also possible to add delays for showing and hiding the tooltip sometimes the user might be just moving their Mouse around and you don't want the tooltip to pop up so adding a delay really helps in those situations we make use of show delay and hi delay attributes let's add a two-second delay Matt tooltip show delay is equal to 2 seconds and Matt tooltip height delay is equal to 2 seconds now if you go back to the browser there should be a delay in the show and height of the tooltip so hover on the button 1 2 and it shows up move your mouse away 1 2 and it is hidden again typically a show delay of 600 milliseconds should be good you wouldn't really need a high delay but again it completely depends on your requirement so that is about tooltips in angular material let's take a look at snack bar in the next video in this video let's take a look at snack bars and angular material snack bars are basically like notifications that inform users of some operation that has been performed they appear for a short duration at the bottom of the screen and they don't require user input to disappear and at any point in time only one snack bar notification may be displayed let's begin by importing the module so in material dot module dot es import mat snack bar module and added to the material array now in our HTML let's add a button that will open the snack bar so button add the mat button attribute and handle the click event on click we will call a method called open snack bar passing in a string item deleted as argument the button text is going to be show snack bar so we now have a button that called the open snack bar method let's go to the class component and define that method to open a snack bar we need to make use of a service and that service is mat snack bar from angular slash material so go ahead and import it and once you import it inject it in the constructor constructor private snack bar of type mat snack bar now we can define the open snack bar method which will actually open the snack bar so open snack bar accepts a message and within the body we use the service instance and call the open method passing in the message so the service instance is this dot snack bar and we call open passing in the such if we now save all the files and take a look at the browser we should have a button and when I click on the button the snack bar should pop up at the bottom of the screen with the message item deleted so we have a basic snack bar working as expected apart from the message we can also specify an action for a snack bar the action is specified as the second argument to the open method on the service instance to keep the open snack bar method more generic I will pass the action parameter as well from the click handler so in the HTML the second parameter is going to be the string dismiss in the component class the method will now take a second parameter which is action and the same is passed to the open method if you now take a look at the browser click on the button a snack bar opens and you can see the message item deleted and the action dismiss when I click on this action by default it closes the snack bar a typical use case for this type of snack bar is usually to undo an operation for example let me rename the button to delete and the action to undo but when the user does click on this action we want to execute some code that will undo the operation the way we are alerted when the snack bar is dismissed or the action is clicked is by using observables so in the component class we are going to start off by storing a reference to the snack bar that has been opened select snack bar F is equal to this dot snack bar dot open now using this reference we can subscribe to the after dismissed or on action observables so the first one is after dismissed it's a snack bar sorry snack bar F dot after dismissed dot subscribe and we are going to basically log the statement the snack bar was dismissed similarly we also have snack bar F dot on action dot subscribe and over here we are going to log the statement the slack bar action was triggered if we now go back to the browser and open dev tools click on the delete button and click on the action we can see the log statements in the console action was clicked and the snack bar was dismissed I just have console log statements but you can have the code to undo the deletion so we have the message and the action which are passed to the open method there is also a third parameter which accepts some configuration the one which would be used mostly is the duration property the Burien property indicates the length of time in milliseconds to wait before automatically dismissing the snack bar I will add an object with the property duration and set it to 2000 which is two seconds say comma and object duration set to two seconds if you now go back to the browser click on the button the snack bar pops up but after two seconds it automatically dismisses and in the console you can see the log statement so the after dismissed part of the code was executed when the snack bar was dismissed so when you have an action you can use the on action observable and when you don't have an action but want to execute some code when the snack bar is dismissed place that code and the after dismissed observable the last point to discuss is about the open from component method as the name indicates the open from component method creates and opens a snag bar with a custom component for the content let's take a look at an example in the existing component class which is AB component dot tias I'm going to quickly copy paste another component now you could create the component in a separate folder but for simplicity I have it right here as you can see the template is a span tag with color set to orange now in the app module I will add the component in the declarations array and add to another property called entry components all right now that we have a component to display as custom content let's add a button and a click handler to open the snack bar so in the HTML button mat button click handler is going to be open custom snag bar the text is going to be show custom snag bar and in the component class we're going to define open custom snack bar and this is basically going to be this dot snag bar dot open from component we pass in the custom component as its first argument and then we pass in duration of two seconds if you now go back to the browser and click on show custom snack bar we should have our orange colored notification custom snack bar alright guys in this video we are going to take a look at dialogues in angular material a dialogue is a type of modal window that appears in front of the app content to provide information or ask for information the usage of a dialog is very similar to that of the snack bar component we looked at in the last video so this video should be pretty straightforward if you've understood how a snack bar works alright let's get started first step import mat dialogue module and add it to the material array next in the HTML create a button that can open the dialogue so button add the attribute mat rais'd button add a click handler which is open dialogue and then the button text is going to be open dialogue now let's define the open dialogue method to be able to actually open the dialogue we need the Matt dialog service so import Matt dialog from angular slash material after importing we need to inject it so constructor let's go with public dialog of type Matt dialog and then we can define the open dialogue method within the body we are going to have this dot dialogue dot open and the open method on dialogue accepts two parameters the first parameter is a component and the second parameter is optional configuration to pass in a component parameter let's first create it so in the terminal we use angular CLI and run the command ng G for generate C for component and the name of the component which is going to be dialogue - example and I'm also going to skip the test files the command creates a folder for the component and adds it to the app module but a component that is used for a dialogue also has to be included in the entry components array so over here dialog example component now we can pass this component as our parameter so nav dot component es this dot dialogue dot open and the first parameter is going to be dialog example component all right let's go back to the browser and test this out if I click on the button a dialog pops up with the content dialog example works and this is the HTML corresponding to our dialog example component right now we just have a paragraph tag but there are several directives meant specifically to structure the dialogue content let's use them instead so envious code I'm going to open the file dialog example dot HTML and first we specify a dialogue title using the mat dialogue title directive so I'm going to add an h2 tag and the directive is going to be mad dialogue title this is going to be session timeout next for the content we have Matt dialogue content so this is going to be Matt dialogue content and the text is going to be you will be logged out due to inactivity next for the dialogue action we have the Matt dialogue actions let's create two buttons one to stay signed in and want to log out so keep me logged in or log out now on both these buttons if you want the click event to close the dialogue we need to add the Matt dialogue close directive so on both the buttons Matt dialogue close alright let's test this out if you go back to the browser and I click on the button we have the model with the title content and the buttons when I click the button it closes the dialogue as well and we have two buttons intended for different purposes how would we know whether to log the user out or keep them signed in when the dialog closes on the button click we can do that using the after closed observable which conveniently returns a result so back in vs code in the component class first create a reference to the dialog so let dialogue ref is going to be this dot dialogue dot open now we can subscribe to the observable dialogue ref dot after closed dot subscribe we get a result and let's simply log that to the console dialog result is result finally we assign a value to the mat dialogue closed directive which is accessed as the result so in the HTML for the dialogue on keep me logged in button mat dialogue close is going to be equal to true for the first case and false for logout let's go back to the browser and test this out I'm going to open the console click on open dialogue and click on keep me logged in you can see that it says dialogue result true and click on logout it says dialogue result false so in the subscription method you can have the code that checks for the result if result is equal to true keep them signed in and if result is equal to false love them out the final point to discuss with dialogues is passing in the data to the dialogue component and there are a couple of steps so let's go over each of them the first step specify the data as the second parameter to the dialogue open method so this is going to be an object the key is going to be data which in turn is going to be an object I'm going to pass a name called vishwas so this is the second argument to the open method next open the component class for the dialogue example component so dialogue example component dot TS to access the data in the dialogue component we have to use the mat dialogue data injection token so first import inject from angular slash core next import mat dialogue data from angular slash material and then we inject it in the constructor so constructor is going to be at inject and we are injecting mat dialogue data and then we say public data of type any so basically we are now making the dialogue component capable of receiving any type of data now in the dialogue component HTML we can simply interpolate the data object so in math dialogue content I'm going to add high data dot name if you now go back to the browser and click on open dialogue you can see that content says Huayra choise you will be logged out due to inactivity so we are able to pass data to the dialogue component now if you want to specify height and width for the dialogue it can be passed into the configuration object there are a bunch of properties you can use based on your requirement so I'll leave that for you guys to explore browse the API tab in the documentation and you will find everything you need alright I hope you now have a good understanding of how to work with dialogues in angular material all right in this video let's take a look at implementing a basic data table in angular material the first step as always is to import the module so in material dot module dot es import math table module and added to the material array now what we are going to do to save us some time is copy the code for a basic data table and then understand the different parts that are responsible for the functioning of a data table so in the material Doc's go to components and then to the data table section and click on the table link over here in the examples tab we have a basic data table now go to the second example which is basic use of math table and uses display flex and click on the code icon now let's copy paste the code first the HTML so copy and paste it an AB component dot HTML next the typescript file so go to TS copy the interface and the data in AB component TS paste it right after the import statement then go back to the documentation and copy the two lines of code from the component class go back to BS code and in app component paste them finally copy the CSS so over here CSS and then copy this and paste it in AB component dot CSS now if we save all the files and take a look at the browser you should be able to see a data table now let's understand the different parts that make up this data table the first part to implementing a data table is the data source every data table needs a data source that contains the data to be displayed in our example we have the data of periodic elements we have an interface that defines the type of each element so a periodic element will have a name position weight and symbol right below the interface is where you see the array of periodic elements we have ten elements each having properties mentioned in the interface what you have to notice here is that the interface and the data array is declared outside the component to be able to use it in the component we need to create a property and initialize it for that purpose we have data source which is initialized to element data this array right here alright the next thing to do is to provide this data source to the data table and we do that in the HTML so an app dot component dot HTML we create a data table with mat table component and to provide the data source we make use of the data source attribute we use property binding to bind the property defined in the component class so data source is equal to element data which is provided here so that is the first step to implementing a data table creating the data source and binding it to the table the second step is to define the column templates in the browser you can see that we have four columns the position number name weight and symbol in the code we define the four columns each inside its own NG container element physician named weight and symbol the ng container element will not be rendered to the Dom but it will provide an element for applying this mat column death directive the mat column death directive is what uniquely identifies a given column with a key position name we and symbol inside the ng container element we will have all the configuration for a given column you can see that we have the template that defines how to display the header for a given column identified using the map header cell death structural directive we also have another template that defines how to display the data cells of a given column using the mat cell def structural directive the to structural directives do not attach any styling to the elements the styling is taken care of by mat header cell and mat cell components next let's talk about the content of the heading and the data cells for the heading you can see that we just have static text number name weight and symbol but for the data cell we get access to each row of the data source we obtain a reference to each row and then access the different properties of each row we then use interpolation to bind the data to the view so in our data source we have ten rows we iterate through the rows get a reference to each row and store it in the element variable and then we access the appropriate property in the column template so element dot position dot name dot weight in dot symbol these are the different properties for each element all right now what we have done so far is just define the column template how it's supposed to look the final step is to define the rows in the data table and for that we make use of two more components to define the table header row we make use of the mat header row component and to determine which columns have to be displayed in the table mat header row death structural directive is used to this we assign displayed columns property which is an array of columns we have mentioned in the component class so display columns is an array of strings with positioned name weight and symbol similarly to display the data rows we make use of the mat row component now with math burrow death structural directive we also have a variable exported that we have named as row containing the data of that given row and we have to specify the columns property which contains the order in which the data cells should be rendered again this is displayed columns property so when you run this code we should have the data table working as expected position name weight and symbol and then the different rows corresponding to each entry or each item and the element array so to summarize there are three steps in implementing a data table in angular material first up define the data source and the columns to be displayed second step define the column templates and finally the third step include the header and the row definitions so we are able to create a very basic data table we copy pasted the code and did not really code anything as such so in the next video let's also try to make some changes and see how that impacts the data table that will give you guys a much better idea of how the data table works in this video let's take a more detailed look at data tables in angular material let's start with the displayed columns property this property as the name suggests controls the columns to be displayed in the browser as you can see it is just an array of strings if I were to for example remove symbol from this list take a look at the browser the column is not displayed so the property controls which of the columns have to be shown but there is more to it than just showing and hiding of columns the order in which you specify the fields to be displayed is the order in which the columns are displayed in the browser you can see that we have the order as position name weight and symbol and in the browser the columns are in the exact same order physician name weight and symbol if you want the weight column to be the last column you just have to specify the weight column as the last column in displayed columns property so I'm going to cut this out and paste it after symbol if I now go back to the browser weight is displayed as the last column which now brings me to the HTML to highlight another point the order in which you specify these column templates with the ng container tag doesn't affect the order in any way whatsoever the order is controlled by the displayed columns property which is specified to the mat header row and mat row components but orders matter with the container column template is the mat column definition attribute the value has to be a value from the displayed columns property if I've already changed position to let's say position test same and take a look at the browser you can see that the code breaks and the data table is not displayed so make sure you specify the right column name to the template next let's talk about the mat row component you can see that we have two variables declared row and columns the columns property is set to displayed columns to indicate what data has to be displayed let's change this and see what happens so in the class component I'm going to create another property called displayed columns data and in this list I'm going to remove weight also back in the HTML I'm going to set columns to display columns data if you now take a look at the browser you can see that we have only three columns of data being displayed and four columns of header the data for the weight column is hidden so it is very much possible to set separate columns to be displayed for the header and the data but then again not sure if you would ever want to do that next let's talk about the road raishin what this helps us with is to get hold of the raw data to handle events on each row in the data table for example I can add a click event binding and call a method that provides us with the raw data let's call this log data and pass in that row variable now in the component class we can quickly define log data accepts a row and let's just console.log it if I save the files and take a look at the browser open console and click on a row you can see the corresponding row data being logged in the console so if you have any action that has to be performed for example editing deleting or navigating to a different route pasted on this row data this is the way to go fasten the data extract the ID probably of that column and perform the necessary action all right then I hope that now you have a much better understanding of how a data table works in angular material next let's take a look at filtering sorting and pagination in data tables features like filtering salting and pagination have been made really simple in angular material let's take a look at filtering in this video sorting and pagination in subsequent videos filtering can be achieved in three simple steps the first step is to create a data source as an instance of the mat table data source class so let's begin by importing mat table data source from angular material next we create a data source property as an instance of this imported class so data source is going to be new mat table data source and then we pass in element data as the argument so that is our first step creating the data source as an instance of the mat table data source class second step is to create an input field where the user can enter the filter text let's add that code in the HTML mat form field then an input element we add the mat input attribute and also a placeholder that says filter every time the user enters some text we need to filter the data table for that we listen to the key up event so key up and on key up we are going to call a method called apply filter and to this method we pass in the filter text which is accessed using dollar event dot target dot value that is the second step creating a filter input the final step is to define this apply filter method which actually filters the data source so back in the component class apply filter accepts the filtered text of type string and within the method all we have to do is assign the filter text value to the filter property of the data source so this dot data source dot filter is equal to filter value dot trim dot to lowercase now this kind of seems like magic but let me tell you how it works remember the math table data source class that we imported well that class has a property called filter when you want to filter out the data all you have to do is assign a string to that property when you assign the filter value the data source will reduce each row to a serialized form and will filter out the row if it does not contain that filtered value or to put it in simpler terms does the data rope contain the filter if yes only then display the row so if we take a look at the browser you can see that we have a filter input I type H and you can see it filters the elements type H E and it filters further I can also filter on numeric values type 6 and you can see it filters out the rows that don't contain the number 6 so three basic steps for filtering creating the data source as an instance of math table datasource creating the input filter and finally on cube of that input element assign the filter value to the filter property of the data source alright in the next video let's take a look at sorting in data tables in this video let's take a look at sorting in data tables just like filtering angular material makes it really simple to implement the sorting feature for your data table now there are three simple steps the first step is to import the material sorting module so in material dot module tortillas we are going to import matte salt module and add it to the material array second step we need to add directives to the material table in the HTML so on the mat table itself we need to add the mat salt directive and to each column header cell that should trigger sorting we need to add the mat sort header directive let's add it to the first three columns so on mat header cell mat sort header and I'm going to add it to the next two columns as well so on mat header cell mat sort header and the same again the final step is to provide the mats our directive to the datasource so in the types of file import mat sort from angular slash material next we use the view child decorator to get hold of a reference to the mat sort component so first import view child from angular slash core and then in the component class at view child mat sort sort of type mat salt and finally in the ng on init method we assigned the mat sort component to the sort property of the data table so import on in it from angular slash core app component implements on in it and then we define ng on in it this dot datasource dot sort is equal to this dot sort and that is pretty much it let's save the files and take a look at the browser now when I hover on the column header you can see an arrow mark when I click on the header the elements are sorted in ascending order click on the header again the elements are sorted in descending order click again and the sorting is removed similarly you can also saw on name and weight ascending descending and no salt the symbol column on the other hand is not sortable that is because we did not attach the Matt salt header directive to this column so there you go sorting data table in three simple steps include the Matt sort module add the directives in the HTML mats or header and Matt sword and finally assign the Matt sort component to the sword probability of the data source in the next video let's take a look at pagination in this video let's take a look at pagination in data tables similarity sorting pagination can be implemented in three simple steps the first step is to import the material Pigeon ater module so in material module Diaz import map pigeon ater module and add it to the material array second step we add the paginated component in the HTML so after Matt table map pigeon ater and we are going to specify two options to the page inator the first one is the page size we specify that using the page size options property let's go with 5 10 and 20 the second option is to show the first and last buttons of the page inator show first last buttons and we simply include it as an attribute the final step is to provide the map paginated directive to the data source so in the types of file import mat pigeon eighter from angular slash material and then use the view child decorator to get hold of a reference to the map page inator component add view child mat regginator the variable is going to be pigeon ATAR of type map page inator finally in the ng on init method we assign the mat paginated component to the paginated property of the datasource so this dot datasource dot originator is equal to this dot page inator and that is it let's save the files and take a look at the browser at first glance you can see that the styling is sort of broken so let's fix that in the HTML we are going to wrap the table as well as pigeon eater in a div tag and then we are going to move this elevation class from math table to the div tag now if you go back to the browser you can see that it looks much better by default five items are displayed per page you can change it to ten or even twenty you can also go back and forth between the pages using the icon buttons the first page and last page buttons might not be necessary for small data sets but if you have several hundreds of rows with a small page size you can definitely include the show first and last buttons attribute welcome back everyone in this video let's take a look at virtual scrolling with angular cdk sometimes you might have to display hundreds or thousands of elements which can be slow in any browser virtual scrolling will help you in such situations with virtual scrolling you can display large lists of elements performant ly by only rendering the items that fit on the screen let's see how that can be done in this video the first step we need to import the scrolling module from angular cdk so in AB dot module dot es import scrolling module from angular slash CD k slash scrolling next add it to the imports array so scrolling module added to the imports array now for the second step we are going to create an array of a thousand numbers so in the component class which is AB dot component or TS file I'm going to create a new property numbers which is going to be an array then in the constructor for that I equals 0 I less than thousand I plus plus this dot numbers dot push I all right now that we have a huge list of numbers let's render them in the HTML I will first render them with the ng4 directive and then show you how it works with virtual scrolling then the HTML add a div tag and then add the mg4 directive and v4 is equal to let number of numbers and then we simply render the number I'm also going to add a bit of styling to this div tag so open up and add a class called number with display flex justify content center-aligned items center let's go with a border to pixels solid maroon and then box-sizing border box and back in the HTML I'm going to add the class number alright if we now save the file and take a look at the browser you should be able to see all the list of numbers what I want to focus on though is the Dom itself if I open dev tools you can see that all of the thousand elements are present in the Dom tree so this is the list with ng for directive now let's implement the list with virtual scrolling back in the HTML the first thing we have to do is create a viewport for the virtual scroll the component is cdk virtual scroll view port on this viewport we have to define the item size attribute and this is basically an indication of the size of each element I have specified item size as 100 so in the number class as well let's add height is equal to hundred next we need to specify a height for the viewport itself and for that I'm going to create a CSS class this is going to be called container and I'm going to set the height property to 400 pixels and back in the HTML on the viewport plus is equal to container now each element is a hundred pixels tall and the viewport is 400 pixels tall so we should be able to see four elements at any given time back in the HTML I'm going to move this div tag within the viewport now for the actual list of numbers we do the same as what we did before with ng for the only difference now is that we are going to use cdk virtual fault instead of ng4 so CDK virtual for this is the directive you have to make use of inside a virtual scrolling container and that is pretty much it if you now save the files and go back to the browser we should only be seen four elements at a time and as we scroll down we can see the rest of the elements but what is important though is observing the Dom tree you can see that instead of rendering all the thousand elements we are now rendering only a handful of them as you scroll the Dom nodes update to reflect the numbers being displayed so this way we can implement a more performant list to display items all right with that we come to the end of this angular material series I hope you are now in a better position to start using some of the material components in your own projects

Channel: freeCodeCamp.org

Views: 215,424

Rating: 4.9430571 out of 5

Keywords: Angular, Angular Material, Angular Material Tutorial, Angular Material Tutorial for Beginners, Angular Material for Beginners, angular course, angular material design, material design components, angular components, angular material course, angular 6, angular 5, angular 4, angular 3

Id: jUfEn032IL8

Length: 183min 49sec (11029 seconds)

Published: Tue Aug 13 2019