This post explains how to add Material UI components in a web application built using ASP.Net Core 2 and Angular.

The source code of this application is available in GitHub and you can download it from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG components to the application etc. You can find more details in below links.

Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in ASP.Net Core 2 and Angular Application

Let us start.

Install Angular Material and Angular CDK

Install Angular Animations module

If you want to install a specific version of above packages, you can perform install by using below command

Here target version is 5.2.0.

Add a theme by importing CSS class

Open styles.css file in ClientApp/src directory and add below line.

The css files for Material UI is located in “node_modules\@angular\material\prebuilt-themes” folder.

Add module imports in app.module.ts file

Open app.module.ts and add below module imports. Here we are going to import four modules from Material framework for Select, Button, Text Box and Checkbox.

Add modules in imports section of AppModule

In the same app.module.ts there is an imports array. Add below modules in this array.

Create a component and add Material UI components

You can create a new component using Angular CLI command. Let’s create an employee component.

Open employee.component.html file and add below code

Now run the application and check the page. You should see the material components if every thing goes fine.

The source code of this application is available in GitHub and you can download from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG componets to the application etc. You can find more details in below links.

Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in ASP.Net Core 2 and Angular Application