Open In App
Related Articles

Adding Angular Material Component to Angular Application

Improve Article
Save Article
Like Article

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


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.


  • 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 angular-material@8.0.0
npm install --save @angular/cdk@^8.2.3

package.json File

  • Add the Card Component Import to app.module.ts file as shown below: 

app-module.ts file

  • 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: 

Application Output

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 17 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials