Adding Angular Material Component to Angular Application

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:  

1. Form Control
2. Navigation
3. Layout
4. Button and Indicators
5. Data Table
6. Popups
7. 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: 
  
  1. Would you like to add Angular routing?
  2. 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 [email protected]
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: