How to install material design in Angular 9/8?
In this post we will give you information about How to install material design in Angular 9/8?. Hear we will give you detail about How to install material design in Angular 9/8?And how to use it also give you demo for it if it is necessary.
In this tutorial, we will learn angular 9/8 install material design step by step. we can use material theme design in angular 9/8 application using ng add @angular/material command. we can easily install material design in angular 9/8 application.
we will create new angular 9/8 project using ng new command and then after we will install material design using ng add command. After that we will create very simple input form example with button.
So let’s see bellow few step to install material design in angular 8 application.
Create New Project
Here, we will create new angular 8 project using following command:
ng new my-app
Install Material Design
Here, we will install material design in angular 8 application using ng add command. so let’s run following command and install everything, you can also see bellow screenshot that asking you when you install material design.
ng add @angular/material
Use Material Design
Now we will create simple example of material design with input form so let’s upload ts file and html file as like bellow:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
MatInputModule,
MatButtonModule,
MatSelectModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/app.component.html
<h1>How to install material design in angular 8 - ItSolutionStuff.com</h1>
<form >
<mat-form-field >
<input matInput placeholder="Favorite food" value="Hardik">
</mat-form-field>
<mat-form-field >
<textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
<button mat-raised-button color="accent">Submit</button>
</form>
Now we are ready to run our app. so let’s run app:
ng serve
You can see layout as like bellow:
I hope it can help you…
Hope this code and post will helped you for implement How to install material design in Angular 9/8?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs