⚡How to install Angular Material in Angular 17 | How to Install Angular Material in VS Code

[Music] hello guys welcome to my YouTube channel if you're new to my channel don't forget to subscribe like this video and hit that Bell icon so you never miss any of my future videos angular material is a UI component library for building web applications with angular framework developed and maintained by the angular team at Google angular material provides a set of pre-built well-designed and consistent components that follow the material design guidelines in this video I will show you how to install angular material in angular 17 let's get started first we will install angular 17 click here type CMD and press enter to install angular 17 type the command NG space new space your project name and press enter now for stylesheet select CSS and press enter now it will ask do you want to enable serers side rendering Type n and press enter it will take some time to download so please wait until the download is completed the download is now complete now type CD space your project name to navigate to the project directory now open the project in VSS code or any other IDE of your choice open a terminal in VSS code click here now select command prompt type the command NG space serve to run the app open your browser and type Local Host colon 4200 and press enter you can see new logo of angular which means that angular 17 has been installed successfully now let's install angular material in Google type angular material and press enter open this link click on get started copy this command click here and open new command prompt paste the command which you have copied and press enter now type Y and press enter to install angular material here choose a theme using arrow keys and press enter now to set up Global angular material typography Styles type Y and press enter for angular animations module select include and enable animations and press enter it will take some time to download so please wait until the download is completed angular material has been installed successfully if you open your browser you won't observe any changes because we haven't added any angular material components yet click on components look for the toolbar component click on toolbar component click on examples click here to see the code now copy this code let's create a header component in your terminal type the command NG space g space c space header and press enter this command will create header component inside SRC /a/ header folder now open header. component. HTML file and paste the code which you have copied you will see some errors like Matt toolbar is not a known element to fix this we need to import angular material modules click on TS copy mat toolbar module open header. component.ts file and add Matt toolbar module in the Imports array now copy Matt button module and matte icon module and add these modules in the Imports array now we need to import these modules copy this code paste the code here now if you open header. component. HTML file you will notice that the errors have been fixed open app. component. HTML file and add app header selector in it to display the header component you will see an error app header is not a known element to fix this open app. component.ts file and add header component to the Imports array also make sure to import the header component open your browser and you will see that the toolbar is displaying but there is no gap between the app logo and icons to fix this we need to add CSS for the toolbar click on CSS and copy this code open header. component. CSS file and paste the code which you have copied now you can see that there is a gap between the logo and icons you may have noticed that the background color of the toolbar is not showing to fix this we need to restart the server press contrl plus C to stop the server and then type in G serve to restart the app open your browser and now you can see that the background color of the toolbar is showing let's change the name of the app open header. component. HTML file and change the name of the app you can see that the app name has been changed let's add another material component in our app click on table component click on examples scroll down we will use this table copy this code let's create a table component in your terminal type the command NG space g space c space table and press enter this command will create table component inside SRC /a/ folder open table. component. HTML file and paste the code which you have copied you will see some errors because we have't imported angular material mod modules for the table component click on TS copy this code open table. component.ts file paste the code which you have copied now copy this code here paste the code which you have copied copy the code for the periodic element interface and the element uncore data array containing instances of the periodic element here paste the code which you have copied copy Matt table module and Matt checkbox module add both the modules in the Imports array now copy the code from the export class table selection example block paste the code which you have copied inside export class table component now if you open table. component. HTML file you will notice that all the errors have been fixed click on CSS and copy the code open table. component. CSS file and paste the code which you have copied open app. component. HTML file and add app table selector in it to display the table component you will see an error app table is not a known element to fix this open app. component.ts file and add table component to the Imports array also make sure to import the table component now if you open your browser you will see both the angular material toolbar and table components thanks for watching please like share and subscribe to my channel I will see you in next video till then stay safe

Channel: Php Node Tuts

Views: 1,675

Keywords: angular 17, angular 17 project, Angular material, angular material ui, angular material theme, angular material installation, how to install angular material in visual studio code, how to install angular material in vs code, angular material table, angular material components, how to install angular material, how to install angular material in angular, how to install angular material theme, how to install angular material table, how to install angular material npm, material ui

Id: 2izPvkchsoA

Length: 10min 45sec (645 seconds)

Published: Wed Jan 10 2024