Angular Material Introduction & Configuration |Angular 15 - Material UI Tutorial

today I am starting a new series angular 15 material UI and this is the cartoon video so here I am going to provide some overview of material UI and application setup and also we can do the basic configuration for this material way and in this series I am plan to cover each and every components in this separate video it's not about just showing the components instead of that we can cover the properties of components and what are the customization we can apply and even handling so most of the things I am going to cover so before starting this video if you are especially looking for any components please put in the comment box I will give the priority for that okay and first let me give some overview of this material UI the angular material is a UI library for angular so then you may have the question what is the difference between angular material and a material UI so material uas and Global provider they are providing UI components for different applications such as angular react beautys and some other applications also okay for the angular they have provided the name as angular material and we have the official site also so let me go to this link we have lot of components and guidelines everything is there the similar way for different UV based applications they have the separate site also so let me click this get started so first thing is we have to install these packages okay so before that let me create my angular application so basically this command will create a new application so make sure you should have the latest version of node.js and also the angular clas installed in your machine okay the application creator also opened in our vs code let me open the new terminal so we can install our midi review package is saying the package of angular material version 15.2.3 is available this is the latest one so would you like to proceed give yes okay so the installation will take some time okay the next thing is we have to choose the theme so there are four themes are available and also we can create the theme as custom so let me select this first option indicoping and then set up Global angular material typography Styles yes include and enable animations yes okay great the installation gets completed now we can review the changes so here we can start from this angular.json file so in this style section one more CS file was included so that is for the theme okay so while installing this package we have chose the theme is indigo ping that's what it is included so in case if you choose to the different theme So based on that the CSS will be varying so that also we can verify let me show you so in this node model angular then material and then pre-built theme we have the different items so we have used this Indigo ping okay and the next change package log.json so it's not that much important so anyway so whatever change in this log.json that will be available in our package.json also and here there are two changes the first one is angular CD case included and also this angular material and in our index.html file there are three CSS file reference are included and in our styles.css so here also we have some changes okay so basically this is the global CLL so whatever change included here it should be applicable for whole application finally in our app dot model.ts this browser animation model is imported okay okay this is all about the basic changes that will be included in our material away installation okay now we can start our implementation so let me take one of the basic example okay and also this source code I am going to upload in this GitHub purpose for your reference I will share the link in the description so I am going to create the separate component for each and every material away components okay so first let me create one component for this input control working next in our app.component.html so let me remove all the codes and here we can include our input component okay let me run this application so this one also will take some time okay now let me go to the official link here we have installed these packages so while installing so these all the steps are already included so now display a component okay so let me take one of the example toggle so here if I need to use this toggle command I have to import this model file in our app.model.ts okay and after that we can use this tags in our material UI in some controls we have some directives that be supposed to include in our control so that's all about the concept now let me go to the common side so here see we have the N number of components like other complete pads the similar way all the form controls listing controls everything we have so as I mentioned we can see everything in the separate video for this video let me check this input this is a very easiest one okay so first let me go to this API section so there only we can get the model so if I need to use this input controls I have to import this model otherwise it won't work and in this overview section see so our final output should be like this so if you're clicking this view code option so they have provided separate items like in the HTML file what we supposed to include and in our TS file and finally in our CSS file also in some cases it is having some model reference okay maybe some additional file also included if you want to check the complete project code then you have to click this edit basic input examples in stack blitz so let me click this one so here we can see the complete application folder structure and what are the files was there so everything we can refer so let me close this one so as I mentioned I am going to use this input control only now let me go to my application yeah it is in the running mode localhost 4200 so input works that's it so here angular material input okay then I am adding one input tag see this output and our exact output should be like this okay so then let me copy the complete HTML code we can include in our application and next to the CSS we can include in our CSS side and finally this TS so in this TS file we don't have anything okay okay let me say this one see we are getting some error matte label is not a non-element so the reason is B naught imported the required model so we can see here label so labels are included so in this form field and this input controls okay so let me import the required model here in our app dot model so in this import section let me add matte input model okay so basically if you are typing the reference will be added if it is not coming then we have to import it manually from at angular slash material the common in this input okay then Matt input model so let me save this one again it is compelling okay see the exception got resolved we can check here see the output so whatever control we have seen in the example the same control we can see in our application also so this is our normal input so let me convert this normal input control enter this mat input this step is very simple first we have to include this mat form field and the next thing is we have to include this directive mat input see so we don't have any placeholder that's what it's not showing so even if I'm included this place called also see the placeholder also coming and here the problem is so I just used one of the component okay then it is not a problem in case if I'm trying to use all the components in our application means it is having around 25 to 30. so in case if I am using around 20 plus components then I have to include all the components models in our app dot model file so the length will be increased even this basic application I am having only one model so in case if I am having n number of models everywhere I have to include all the 20 plus models then it is really hard and also recently we have this Standalone components then in this component import section we have to include every models that also two strands so avoiding that what we supposed to do we can create one common material model so there we can import all of our required models so bear rubber we are going to use this material way there we can import only one single model file okay that's all about the customization purpose so let me do this one now first I am creating on TS file for the material model basically defining any model so we have to use this NC model option and we have to export this one and inside this model we have this export section so there I am going to import the required models so first one I am going to use this material I mean this matte input model okay this is not coming so let me take it from our app dot model so very recently we have included I am just copied here okay this is fine and next in our app dot model I am going to remove this one and also this matte input model so instead of that I can use this material model so let me say this one there is no error I believe it will work see it is working fine so the same way we can take this select control so let me go to this example we can just select this control only match select okay I am coming to our input dot component so they are I'm including this match select so if I'm saved this one it will throw the error so it is saying mat select is then not known property so what I'm going to do for resolving this one I am including this model so the package is Select and my model is Max select model the naming structure also almost similar okay it is starting from the mat into the model so inside that we have our control name okay I just included here again it is comparing you can see it is working so in this output window see currently we don't have any options so anyway our select control is working fine so this is the way we are supposed to follow if you are using this material in our angular application so now we are almost in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel so as I mentioned in my upcoming videos I will take all the components one by one and also if you are looking for any components please put in the comment box I will give the priority for the particular component so we can see in the next video one of the interesting topic thank you thanks for watching

Channel: Nihira Techiees

Views: 16,399

Keywords: Angular Material Tutorial, Angular 15 - Material UI Tutorial, Material UI Course for begginers, angular material UI example, step by step explanation of Angular Material 15.0, Introduction of Material UI, Material UI installation, how to create common module for material UI

Id: KPTKubxbRZ8

Length: 16min 18sec (978 seconds)

Published: Mon Mar 20 2023