Adding Angular Material Component to Angular Application - GeeksforGeeks

17 Sep, 2021
Angular Material provides Design Components for Angular. This is build and maintained by Angular Team. This provides the Angular developers with common UI components and tools to help build their own custom components. We as a user can integrate this with our Angular Application using the npm packages provided by them. Angular Material also provides CDK in order to integrate common Interaction patterns.
 Lists of Some Components provided is:  
Form ControlNavigationLayoutButton and IndicatorsData TablePopupsModals
Form Control
Navigation
Layout
Button and Indicators
Data Table
Popups
Modals
STEPS TO ADD MATERIAL COMPONENT TO YOUR APPLICATION:
Install Angular
Create a Angular CLI Project
Install the Angular Material npm package as well as add corresponding angular/cdk because angular material uses it and is dependent on it: 
npm install --save angular-material
npm install --save @angular/cdk
This command will add the latest Angular Material Version package to the project as well as ‘–save’ will add the dependency to package.json file Note if you want to add any specific version to Angular user the command below : 
npm install --save angular-material@version
npm install --save @angular/cdk@version
In order to use any Component, Import that Component in app.module.ts file
Add the Imported class to “imports” section in your app.module.ts @NgModule section
Now, we can start using it in our project. Choose a specific selector for the Material Component. Go to app.component.html file or another template of the component in which you want to add the Material Component, write the selector code to it.
Save all the files and then Start the Application using: 
ng serve
This will reduce your efforts to implement the component right from the base.
EXAMPLE OF ADDING CARD COMPONENT TO YOUR ANGULAR PROJECT:  
Install Angular
Create a new Angular project using: 
ng new GfGMaterialCardExample
You will be asked 2 questions as shown below: Would you like to add Angular routing?Which stylesheet format would you like to use? (Use arrow keys)
Would you like to add Angular routing?Which stylesheet format would you like to use? (Use arrow keys)
Would you like to add Angular routing?
Which stylesheet format would you like to use? (Use arrow keys)
Change the directory level, go to the project folder. 
cd GfGMaterialCardExample
Install the Angular Material npm package(@8.0.0 is compatible with Angular 8, Add Angular component based on the Angular Version you are using), Also Install Angular CDK: 
npm install --save angular-material@8.0.0
npm install --save @angular/cdk@^8.2.3
Add the Card Component Import to app.module.ts file as shown below: 
Remove all the Boilerplate Code in app.component.html File and Add this code: 
 Geeks For Geeks - Angular Material Card Example 
Add the CSS Code you want to apply in app.component.css file: 
mat-card {
    color: green;
    border:1px solid black;
}
Start the Application using ng serve command: 
rajeev0719singh
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?