Clear Thinking in Data, Cloud, and AI

Practical insights from real-world cloud, data, and applied AI systems

Serving data with Angular Material

Written by

Shahzad Khan

in

on

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!

FavoriteLoadingAdd to favorites

RECENT POSTS

Categories

Log in

Tags

ADO ai angular asian asp.net asp.net core azure ACA azure administration Azure Cloud Architect Azure Key Vault Azure Storage Blazor WebAssembly BLOB bootstrap Branch and Release flow c# c#; ef core css datatables design pattern docker excel framework Git HTML JavaScript jQuery json knockout lab LINQ linux powershell REST API smart home SQL Agent SQL server SSIS SSL SVG Icon typescript visual studio Web API window os wordpress

ARCHIVE

DISCLAIMER

The information on this weblog is provided “as is,” without warranties of any kind, and confers no rights. The content reflects my personal views and does not represent the thoughts, intentions, plans, or strategies of any organization with which I am affiliated. Discussion and differing viewpoints are welcome; however, I reserve the right to moderate or remove comments that are abusive, profane, rude, or anonymous. Please keep the conversation respectful and constructive.

More posts