Angular 17 Tutorial #5 - Install Angular Material | Angular 17 Tutorial For Beginners

friends welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners this series is also helpful for developers who are coming from previous versions of angular because angular 17 think of it like a new framework there are a lot of breaking changes that you need to learn with that being said this is part five of the series today we are going to learn one of the most fundamental things when you work with angular applications which is to use a UI framework in most Enterprise applications if you see angular applications are built with angular material framework what is angular material how to install how to check I'm going to show you everything let's get started understand that there are different UI Frameworks that you can work with angular including bootstrap foundation and much more I'll cover bootstrap in the next episode today will focus on learning how to install angular material for those of you who don't know what is a angular material you can go to material. angular.io this is a set of components which are specially designed for angular there are all sorts of different components that are used to build modern web applications the components include autocomplete badge tables forms cards chips dat picker accordians input list page Nation select radio so basically this UI framework includes all the things that are often required to build any application all right so that's what we will be using in our application also which is a crew management system we are trying to build all right so that's the um high level overview of angular material for you and let's get down to the business of installing it all right so now if you open your angular um sorry package.json all right so you can see if you open package.json you would see all the angular components and the libraries modules that are required now to install angular material in your project angular 17 project you will type and I'll open bash okay and clear and I'll do CD learning SL angular 17 and CD crew management and here you will type NG add okay that's the command and the command that you will run is this you can note it down or refer this PBT I'll share this with you so anything that you want to add let's say you want to add a custom cdk you want to add angular some other module you will use at the rate angular the module name okay in our case since we are trying to add angular material you will write NG add angular SL material now same way if you see here at theate core at theate forms animations like that you can add cdk and much more all right so remember the format is same which is NG space add at theate angular SL material now hit enter and it would give you few options okay now so check here it would update this and it would install angular material 17 is everything okay say yes and then it would ask you to choose some options like the theme Etc that it will come up in just a bit so have patience in the meanwhile please do hit that like button for me and if you have already not subscribed please do so to keep supporting me all right so now it says the package angular material 17.10 will be installed and executed as part of it packag is successfully installed then it will ask you to choose a theme pre-built theme okay now here you can choose the different themes or we can also build a custom one but if you are a beginner or already a developer choose any existing one and I'll show you how to build custom themes as we progress in the series then it would ask you to set up Global typography Styles type what is typo graphy everything I'll cover as we progress for now just hit yes so type y that's the thing now include an animations module all right if you see animations is already there but this would enable the buttons hovering effect all of that along with it so hit yes and then it would say packages installed successfully and it will tell you all the files that were updated in this case it updates ated app config angular Json index file and style.css those are the files that got updated if you now look at the package.json you see the green things that means they were newly added so cdk got added and material angular material those two are installed successfully all right the next thing you will do once you have executed the command you need to verify that everything is uh installed correctly yes so you will type NG serve now this will build the application and open up the local host for you now Local Host now if you see all of these are angular material um the typography okay but if you want to really see how to use it just select any one let's say API button okay or any example you can take um say let's say we want to use a basic button or something like that so you can go to the code copy the button okay and copy this button as it is go to the code or you don't want to do all of this that's fine now remember what I'm doing here this is very very important delete everything from app or don't delete anything for now just add the app button and reload and hot reload page reload send to clients to unchanged now we are not able to see the files or it should be at the bottom you can see the buttons are added but the style is not reflecting okay so for that what you would do so what we are trying to basically do is simply add uh a simple button right now the format is same I will cover this in detail when we move progress for now just copy the import line from the API because these are required okay I'll show you a shortcut when we come there but for now we don't need that so in the Imports just import mat M module and reload and now you see the buttons are coming up nicely just like the angular material okay now I can also used button raised and this and you can go back refer examples all of this code is accent raise button so did I type wrong spelling let's check uh raised button sorry it's not button raised it's raised button my bad so you can see the colors are coming up nice and good just like how we would want it okay that all we are trying to do today is just make sure that angular material is installed successfully okay and this is just an example even if you are not able to follow few things after the installation that's totally fine okay do not panic do not run away do not get scared okay this is absolutely the most basic thing I can tell you this is the most basic thing that you should know before we even start we will dig deep we will learn all everything but for now don't worry at all okay even to make it make it better visible I don't know if it was visible at the uh end or not so I'm going to put the buttons right at the top so just so you can see it clearly okay so this is just a basic check to make sure that angular material is installed correctly okay don't worry again don't worry too much if you're not following something now because these are just installation make sure that you got the installation correct even if you don't get the button part that's fine because as I cover app module NG module we will learn everything in detail okay stay with me stay the course and I'll make sure you'll be an expert in angular 17 with me I hope you're enjoying this series please do show me some love by liking this tutorial and also please do subscribe to my channel in the next episode we will learn how to install bootstrap framework if you are a fan of bootstrap I'll show you that also but this series mostly we will work with angular material thank you so much for joining in this episode see you in the next episode

Channel: ARCTutorials

Views: 11,477

Keywords: angular 17 tutorial, angular 17 tutorial for beginners, angular 17 crud, angular 17 features, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, angular 17 ssr

Id: RJY5rnxXmMY

Length: 9min 29sec (569 seconds)

Published: Mon Jan 22 2024