Angular Material Table Example With Pagination (Learn it in 21 Steps)

Please find the below steps to show the angular material table in angular application.

Step 1: Create an angular project using “ng new <Project Name>”.

Step 2: Change Directory to project location using “cd <Project Name>”.

Step 3: Open Project in VS Code.

Step 4: Enter the command “ng serve” or “npm start” to run the project.

Step 5: Stop the server and enter the command “ng add @angular/material” in Terminal. Please find the attached screenshot for reference.

Step 6: After successfully adding the @angular/material. Start the server again using “ng serve” in command prompt. open angular app in chrome using http://localhost:4200/

Please find the attached log file and screen shot for reference to validate angular material successfully added or not.

Step 7: Open app.component.html using “Ctrl+P” and clear the Html content which is generated while creating an angular application.

Step 8: Add MatTableModule in AppModule ts and also add inside imports array

import {MatTableModule} from ‘@angular/material/table

Step 9: Add mat table related tags inside app.component.html. Please find the below attached screen shot.

app.component.html

Step 10: In the above screen shot it containing two columns. As per the mat syntax we are mentioning column names using through displayedColumns[] and data will be populated automatically but just we need to pass datasource.

Step 11. For satisfying the above statement we need to create two variables. Please find the attached screenshot for reference. And adding some dummy data.

app.component.ts

Step 12: Add Paginator module in app.module.ts and add inside imports []

import {MatPaginatorModule} from ‘@angular/material/paginator’;

Step 13: Added paginator tag in app.component.html along with table. Please find the attached screenshot for reference.

app.component.ts

app.component.ts

Step 14: The above example, we are dealing with the dummy data and using the service to set table as dynamic. So that we need to add Http Client Module inside app.module.ts file.

final app.module.ts

As per the above step, we achieved up to here.

mat-table in chrome ui

Step 15: Create a service file in an angular application using “ng generate service <service-name>”.

Step 16: Open the service file and add the method to get usernames. Add two params inside the getUsersByPageIndexPageSize() method. Am using json-server, in server we do not get total items so need to create one more method getAllUsers()

Using JSON server URL to get the data.
https://my-json-server.typicode.com/mryenagandula/json-server

Step 17: fetch the data from JSON server URL. Attached screenshot for reference.

Step 18. Inject service inside the app.component.ts and add logic for users length and datasource[].

Step 19: Check the UI inside chrome using localhost:4200

Step 20: Add pagiNavigate method to navigate from one page to another page and also added page event inside app.component.html.

app.componet.html

app.component.ts

Step 21: Check the changes in chrome UI using localhost:4200

Final Output

For more information, you can visit https://material.angular.io/

Download Source Code At
GITHUB:
https://github.com/mryenagandula/angular-table-with-json-server
Live JSON Server:
https://my-json-server.typicode.com/mryenagandula/json-server
Stack Blitz:
https://stackblitz.com/edit/angular-table-with-json-server

Thanks for reading my article, please share your feedback, claps, and comments. In that way, it will have helped me to improve my articles in the future. Please share my story with your near and dear, also follow and subscribe to the medium.