Angular Material 3 Guide | This Is Future of Design System

material 3 is a really awesome UI widget library from a Google and guess what it's about to get released for angular also so in this video I'm going to show you how you can already start using the material 3v UI widgets and component in your angular application as you can see that it has plenty of new UI components and it has a improvised look and feel to it so like the elements that we are already familiar with the materials State picker table dialog whatever they are bit anounced in the material three and uh they also have like some new components that they have introduced like this you can uh make it outline or just field which was not there before and like there are plenty of other elements also like the bottom sheet which was not there or maybe your expansion panel they as you can see that they have a really good nice look and feel this time even your de picker is uh you can make it rounded like that in general material 3 is a future of a design system and and uh angular material is a library that is already very popular among the developer and many people use it so uh in this video I'm going to show you how you can already start to use it how to set up the material three in the angular project and uh how you can basically start using the uh latest UI components for your next project if you new to this Channel I want to introduce you like on this channel I make a very interesting tutorials about the technical topics and sometimes I also make a tutorials about how to prepare for the job interviews how to crack the job interviews so if you are new here I uh request you to show support I make the videos to share my knowledge and uh to contribute to the community and I don't get any Financial benefits out of it it's totally for following my hobby but if you like my content subscribing to my channel is a really good way to show support and it really motivates me a lot so uh I'm going to show you how to set up the material 3 uh it is basically uh in the experimental mode as I'm saying but by the sometime it will not be so as you can see that I have angular material 3 experimental and I'm going to show you how you do this setup in your angular project and we are going to basically play around with all the components that are newly available we are going to see like how we can set them in our custom angular application we are going to explore like what are the new possibilities and don't worry about the code all the source code that I'm going to show a example I'm going to show a demo on will be available on my GitHub you just have to check the description below and you will see all the links and I will also tell you like if you just clone the repository you will be able to do the same things on your uh local instance okay so let's start by creating a new project in angular and I'm using angular's latest version which is angular 17.2 so that we are going to use for our uh this project of demo of Ang material 3 so what I'm going to do is just do NG new and let's call this a material 3 demo and uh this will create a new project for me and I'm going to choose scss because I want to use that uh I don't want server side rendering so I'll simply put n and uh it will give me a project for my angular and I guess I'm not connected to the internet so probably it will fail the installation of Library let me turn on the internet and I think hopefully it will install the libraries let's see if it does and luckily it worked so let me CD into my new project and uh we'll clear this and let's see what we got here so obviously we'll have uh like the scaffold project that angular generates by default so uh now we have to install the material 3 Library okay to install the material 3 Library usually we do that with the NG ad basically it's not just about material but if you have to install any package that supports angular schematics you do that with the NG ad and uh this is the traditional way if you have to install the libraries you do NG add angular material and it will install that but since in our case the material 3 as I said in the starting material 3 is in the experimental mode it's still not officially released but if you want to like install that we can uh still install that but uh it doesn't work with the angular schematics so if I do NG add and uh just paste the package name it will say that angular schematics will be installed but if I go it just giving me the like package will be installed and if I say yes it will fail reason is because this is in the experimental mode and uh package was not found and that does not support the schematics so this is in the schematics sorry this is in the experimental mode and that's why angular schematic doesn't support this package to be installed so basically angular schematics handles the things like creation of the uh some files or some configuration files or updating the style CSS like that if I do a same thing with the normal angular material it will install the latest stable version of angular material and it will work perfectly but in our case since uh it's not released officially and it's in experimental mode and we want to try the things before it release that's why we are going to follow a different approach so what I'm going to do is I'm going to add this angular material 3 experimental as a uh dependency in my package. Json I'm also going to add the angular material as a dependency so that I get like latest version of angular material also and uh there are few other libraries that we need like the animation common that we definitely going to put there so I'll simply uh I can do like this way or if you're using yarn it's easy if you just do yarn Yar yarn add and then paste the name of the package that you want to install and yarn behind the scenes take carees of getting the latest version of that package and it makes that entry so I just did like H yarn add angular material and uh it will update the package. Json over here there we go I have angular material 17.30 that's added and that's a beauty if you're using Y you just need to provide the name of package and it will get like it let us version of that package and we put here or you can also like specify which version you want to install and it just a yeah add command will basically just make entry in the package of Json if you have to install that or install all the packages you do like yarn install I'll run that and this is a one time command and as you can see that this is very quick very fast because YN basically uses the cach sh mechanism for the libraries for all the dependence and module that's why I love YN as a package manager okay so we have all things uh installed so what we'll do is we'll get rid of the ball plate code that uh usually is generated uh so we just update some text and we'll go to the app and in the app I will get rid of everything what we have here in the app component. HTML and the CSS is fine TS is okay so uh we'll basically create a new component and uh our ultimate goal is like we have to like I have to show you how can we integrate the material three components in any angular application so I'll create a uh individual component for each of the example like for the na bar for the menus for the snack bars for the toggle like that and uh I'll cover everything so that you get to know like if you have a custom angular application how you can make use of this materal 3's latest UI widgets so I will simply create close this so I'll simply create a new component and that component will basically for showing a dead picker material three date picker so I'll generate a component and we'll call it date picker and uh inside that date picker we are going to basically write a date picker of material 3 and that that basically we are going to refer from our app. compound HTML so that it will be present it will be present in our Dom Okay so let's start from the date picker component and in the date picker component basically I'm going to just create a date picker calendar and uh we are going to use material three so uh let's make this as a standalone component and I'm just provided like a CSS though I'm not going to use much in this example so let's provide the N date adapter that we basically need to import and I'll tell you like what is the purpose of it and then this is my template where I have mform field apperance is going to be apperance method so what I'm going to do in this example I'm specifically I want to specifically show you that how you can customize the apparance of your date picker it can be like outline or just field version and that I'm going to do depending on some condition if you click on a button then it's going to change like the appearance of that date picker so that's why I put it here but it's completely optional uh then you have like mat label hinted picker toggle like we usually do in the materials like material component and bun of imports that you need because I'm using a standard component that's why I have too many Imports but uh in a practical scenario it's ideal to make it more to make a code more cleaner you just import them in a one module and then then you import that module in uh in the component or the another module that you want so uh I'll like uh inject the appearance because I'm going to decide the appearance of this de field depending on some method in my service so that's why I have put it like this and uh then there we go my imports uh I did one thing also like I am showing here I have the apparance service and that basically means I need apparance service so I created apparance service in my services folder and there I have created a change appearance method because my goal here is I want to change the appearance of calendar from outline to F on the Fly okay so uh that's it we need in the date Pier component and and if I take you to a browser it will still not work uh because I don't have all the Imports that I need in my app config so let's uh provide those dependencies so I'm going to use Quick link strategy uh this is basically for your lazy loading stuff and uh we want to have some animation so that's why we are importing it from the angular platform animation so I'll provide provide animation a sync as a providers and in my provider router I'm basically going to Define the with preloading quick link strategy so this is just for the lazy loading stuff it's completely optional but it basically enhances the overall performance of application so it's good practice to follow it and then uh we need to specify this with the view transition and Skip initial transition so that uh material three basically follows these transition patterns uh I'm not going into a much details uh you can read the documentation of it like how exactly it was but for this for this demo my purpose is to show how how you can integrate material three widgets in any custom angular application so yeah and if I take you to a browser it's still not going to work completely because uh we have one important part missing and that part is basically your style. scss file so if you are aware like whenever we add any uh CSS or the any styling related dependencies in an angular project we need to import them in our main style file so since we are using the scss here we chose the scss when we were creating a project uh we have a style. CSS but depending on like what uh type you choose you can have a CSS CSS SAS or something different so we need to basically import the material three things over here and this is the important part actually this is where we are importing the material three things and uh basically telling our application use the CSS of the material three in whatever material uh elements you encounter so we need a angular material input so we are just importing that in our scss and beauty of using scss is that you can import these style sheets like this so if I just click on it then you can see like this is the whole stylesheet file for the material and uh we are just importing them in our style. CSS which is basically at the global level in the Ang project and then this is the actual part we are using the material experimental as matx here so we are importing that since we install the package it is somewhere in our dependency so that's what we are going to import and uh in the subsequent scss uh style rules we are going to use that matx so we are also saying like use S SAS map and uh I'm going to define the pallet and uh this pet is basically I'm going to show a couple of themes in material three like you can also put uh themes material comes with a default things like you had Indigo pink Violet something like that uh so similarly material 3 has a bunch of more palettes bunch of more themes like Canan magenta orange that you can use they are like by default color schemes that you can put for your component and it will follow that theme but you can also customize it and follow something custom scheme that uh is more specific to your application so this is all SC CSS part I'm trying to achieve is just Define the theme name and that color name and whenever like any user choose that theme from somewhere in my application I'm going to switch to that theme and apply the uh CSS rules for that theme for example for primary I'm going to use the pallet which is choose but again to iterate the important thing to use material 3 in your angular application is this line number two you need to import it and put it as a matx um and yeah that's where you have the support for the material 3 and this thing is just for the experimental mode because we are trying out the things in the experimental mode it's not it released but when it gets released officially then you don't need to follow this approach you basically to NG add and uh angular M NG add angular material and you will get the most of the things configured by default by angular schematics you will just have one UT line over here in the style. CSS and you don't need to do this custom stuff that I did here because in this example I want to show a theme of application on the fly so these things are because of the reason I want to put a theme selector like this so uh this is what my goal is I'm going to like uh switch between the themes from here that's why uh I'm putting these things but it's completely optional if you don't want to do that it's like you can skip that part uh okay so I have the Styles over here and and also wrote the code for the date picker so it should be enough for my uh date picker to work so if I do a refresh and open it then uh it's still broken let me check why and that is because my application is still in the building phase it's not completely built so let's wait for a couple of moment and uh it's completely uh built as you can see HMR update it uses weight behind the same for compil all the dependencies and all the stuff and yeah this is the hot modu replacement let's see if it works and now it looks good and uh this is how it should look and uh yeah it's working perfectly because this is how uh uh calendar widget this is how a date picker looks in the material 3 just to prove you that we are using a material three and not the usual material uh stuff I'll take you to the components of material documentation and uh there we'll see like how it looks on the latest version and how it's looking on the application that we have so if I take you to the date picker and if I show you that this is how a date picker is looking on the latest version of material which is 17.3 and uh this is how it's looking on the um material 3 which is not officially released but we still manage to integrate in our application so if you go to uh maybe I don't know they don't have option over here but there is a still documentation for material three uh which is over here material 3 theming you can also understand like how to set up the material 3 this is the same steps that I did as you can see that you have to import the angular material experimental asmatics and then Define it in your theme like which color you want to use typography all that and there are a bunch of other options this are like the predefined templates and typography options and scale there are a bunch of other options and they have given like examples how to use the checkbox so maybe we can give a try to the checkbox this time let's uh go to our date picker component or maybe I'll just put that in in know our app uh component itself just to keep it separate uh so I have mat checkbox I need to uh specify like the Imports for the checkbox probably M checkbox tertiary checkbox I put a custom class and and I think I probably need to put the import so I'll go to app component and we'll import M checkbox module like this and this should work now so I have my new checkbox over here it has a cool uh click effect cool Rippling effect on click event and we can basically uh specify the behavior of it so if you tweak around the CSS things like they have to share checkbox so this is how we can do it uh I want to make this video not so lengthy that's why uh I want to respect your time and that's why I'm not going to show you like exactly how to implement each and every component because there are bunch of components that are there it's not a small set of component that's what what I'm going to do is I'm going to integrate all those component and when I have all the projects set up all the components ready in my angle application I'm going to take you through individual component so I have whole set of components in my project I have badge I have bottom sheet I have buttons everything that you will need I'm not saying that this is the whole list uh but I try to like uh cover everything that is usually used in the angular material so you will find all the Essential Elements like the card button chips and uh what I try to do here in this example is just put a components and the template and import the necessary things so so whenever you will see any uh component for example nested menu you will have a Imports of the menu related modules that you need from the material you just have to import them put it somewhere in your uh Imports if you're using a standalone components you can just specify them in the Imports array if you're using a module base approach then you can make that entry in the Imports array the module but it depends uh but the important thing is you need to have that import and uh that's it what you need I have not put any custom CSS for individual components here because that's not a good practice to use the angular material component you put it centrally somewhere in the style file like this um and I have implemented the uh switch theme functionality and that is happening in my uh layout and the service file that I created so that's it uh in this application uh the reason I'm not taking you to the individual components because as you can see the list is pretty big if I show you how I put a code for each and every of it it's going to be very lengthy video and actually this is not required also if you understand the approach for the single component like I showed you for the date picker how you can set up these stuff for the date picker then you can follow a same approach to do with another UI widgets and you'll be able to do it's pretty similar you just have to uh see the code what is exactly there and you can get that from your angular materials the documentation if you go to the components and then to the API references you will find like how to do that if you go to example it will tell you exactly a code that you need to put in your angular file so this is how you use the material documentation this is how it's looking I put the menu on the left that is basically a components of whatever things you have and in the date picker I implemented like the range date picker where you can choose the date range like this which is something new that was not there in the previous material version and you have like this basic date pier where you can choose the simple one but in the range you can select the range so this is something that is added in the material 3 and you have very good variety of batch option that I really found very interesting you have the snack bar which is just like a toaster uh modified anoun version of a toaster then you have expansion panel and U you also have the bottom sheets uh which is something very new uh I don't know whether it is which version it was list in which material version it was releasing uh very recent I believe and yeah of course theme part you can switch it from here you can go to the blue you can go to the red or whatever and uh what we are doing in behind the scene is we are just leveraging this style. CSS file where we have a bunch of uh variables defined for this pallet like this and whenever users switch the theme from that right menu we are simply altering the values of this menus and that is happening that is happening via the mean of this theme service here so I'm just like uh reading that values and uh I'm just altering the scss theme variable from here as you can see okay so uh purpose of this video was to show you how you can start using materials three UI widgets in your custom angular application and uh this was basically focused on how to set up the things how to import it how to use it I showed the example of the de picker in detail but if you want to use any other components it's pretty easy you just refer the angular material documentation you get to know what code to put and uh you just do the steps that you have been doing you just do the steps that you normally have to do and you'll be able to use it uh remember I showed this for the experimental mode going forward you don't need to you don't have to install the experimental module if it becomes a stable version in a future then you will basically start using the stable version if you like this video uh do give it a like and uh if you really enjoy my content then subscribing to my channel is a really good way to show support thank you for watching

Channel: Brogrammers

Views: 5,035

Keywords: angular material tutorial, angular material, angular, google design, material 3 web, figma material design 3, angular 17, angular tutorial, how to setup angular, datepicker in angular, customize material ui component, customize angular material theme, angular tutorial for beginners, angular tutorial in hindi, angular signals, angular primeng, angular primeng menu bar, angular primeng project, responsive web design, angular advanced interview questions and answers

Id: MGnLrim_WnM

Length: 24min 2sec (1442 seconds)

Published: Thu Mar 14 2024