Please find the below steps to show the angular material table in angular application.
Step 1: Create an angular project using “ ng new ”.
Step 2: Change Directory to project location using “cd ”.
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 in side 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 ”.
Step 16: Open the service file and add the method to get user names. Add two params in side the getUsersByPageIndexPageSize() method. Am using json-server, In server we not get total items so need to create one more method getAllUsers()
Using JSON server URL to get the data.
my-json-server.typicode.com/mryenagandula/j..
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: github.com/mryenagandula/angular-table-with..
Live JSON Server: my-json-server.typicode.com/mryenagandula/j..
Stack Blitz: stackblitz.com/edit/angular-table-with-json..
Thanks for reading my article, Please share your feedback, claps, and comments. In that way, it will be 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.
