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
1 |
npm install --save @angular/material @angular/cdk |
Install Angular Animations module
1 |
npm install --save @angular/animations |
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.
1 |
npm install --save @angular/material@5.2.0 @angular/cdk@5.2.0 @angular/animations@5.2.0 |
Add a theme by importing CSS class
Open styles.css file in ClientApp/src directory and add below line.
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
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.
1 2 3 4 5 6 7 |
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSelectModule, MatButtonModule, MatInputModule, MatCheckboxModule, } from '@angular/material'; |
Add modules in imports section of AppModule
In the same app.module.ts there is an imports array. Add below modules in this array.
1 2 3 4 5 |
BrowserAnimationsModule, MatSelectModule, MatButtonModule, MatInputModule, MatCheckboxModule |
Create a component and add Material UI components
You can create a new component using Angular CLI command. Let’s create an employee component.
1 |
ng generate component employee |
Open employee.component.html file and add below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="panel panel-info"> <div class="panel-heading">Employee</div> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <mat-form-field class="example-full-width"> <input matInput placeholder="First Name"> </mat-form-field> </div> <div class="col-md-3"> <mat-form-field> <mat-select placeholder="Favorite food"> <mat-option>Pasta</mat-option> <mat-option>Ice Cream</mat-option> <mat-option>Pizza</mat-option> </mat-select> </mat-form-field> </div> <div class="col-md-3" style="margin-top:15px"> <mat-checkbox>Check me!</mat-checkbox> </div> </div> <div class="row"> <div class="col-md-3"> <button mat-raised-button color="primary">Save</button> </div> </div> </div> </div> |
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
3 comments on “How to add Material UI components in ASP.Net Core 2 and Angular Web Application”: