Welcome to the Angular Material tutorial. In this tutorial, we are going to go through a detailed example of how to use Angular Material components to create a fully functional client application that consumes the ASP.NET Core Web API server (or you can use any server to consume its responses).
ASP.NET Core Web API Section
If you want to learn how to create the server part with ASP.NET Core Web API, you may do that by visiting our series about it ASP.NET Core 3.1 Web API.
What We Recommend
If you are not familiar with Angular at all, we have a great tutorial about Angular on our blog: Angular Series. We strongly recommend reading it first because you will gain all the required knowledge of the Angular framework and it will be much easier to follow along with this tutorial as well. If you are familiar with Angular, then just feel free to continue towards the lectures.
What Are We Going to Learn?
First of all, we are going to start with the Angular Material Installation. Then, we are going to use various components to create a fully functional client application. We are going to create a fully responsive navigation menu, use material tables with filter, sort, and pagination functionalities. Furthermore, we will show you how to use spinners, a progress bar, card, select, expansion panel, and many other components from Angular Material.
Prerequisites
- Node.js which is a prerequisite for Angular
- Visual Studio Code, or any other editor you like
Background
- Basic knowledge of Javascript
- Familiarity with HTML and CSS
- Decent Angular programming knowledge
This Tutorial Is Separated Into Several Parts
- Getting started with Angular Material
- Navigation Menu – Sidebar, Main Navigation
- Angular Material Table, Filter, Sort, Paging
- Angular Material Progress Bar, Spinner, CheckBox, Card, Select, Expansion Panel – Create Error and Details Pages
- Material Inputs, DatePicker, Form Validation, Modals – Create Owner Component
Have fun!