Serving data with Angular Material

To implement a table with paging, sorting, and filtering feature we can use Angular Material. Angular Material is a I Component library that implements Material Design. This UI design language is developed by Google in 2014 which focuses on using grid-based layouts, response animations, transitions, padding and depth effects such as lighting and shadows.

To install Angular Material, follow this;

• Open Command Prompt
• Navigate to /ClientApp/ folder
• Type the following command

> ng add @angular/material

This will trigger the Angular Material command-line setup wizard, which will install following npm packages;

• @angular/material
• @angular/cdk (prerequisite)

Make sure to install same @angular/material version specified in the package.json.

During the installation process, you will be asked to pick prebuilt theme. I am picking up the first one (Indigo/Pink). Once done the setup process will update the following files;

- package.json
- /src/main.ts
- /src/app/app.module.ts
- angular.json
- src/index.html
- src/styles.css

Enjoy!

Add to favorites