Hello Devs,

In this tutorial, we are going to learn how to install material design in angular 10.

We will create new angular 10 project using ng new command and then after we will install material design using ng add command. 

Follow this step by step guide given below:




Create New Project

ng new my-app



Install Material Design

ng add @angular/material



Import CSS:

src/app/app.module.ts

/* Add application styles & imports to this file! */

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

  

.example-form {

  min-width: 150px;

  max-width: 500px;

  width: 100%;

}

  

.example-full-width {

  width: 100%;

}



Use Material Design

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

   

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatInputModule} from '@angular/material/input';

import {MatButtonModule} from '@angular/material/button';

  

@NgModule({

  imports:      [ BrowserModule, FormsModule, MatInputModule, MatButtonModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

src/app/app.component.html

<h1>Angular 10 Install Material Design Example - Rathorji.in</h1>

   

<form class="example-form">

  <mat-form-field class="example-full-width">

    <mat-label>Name:</mat-label>

    <input matInput placeholder="Ex. Hardik" value="Hardik">

  </mat-form-field>

  

  <mat-form-field class="example-full-width">

    <mat-label>Address:</mat-label>

    <textarea matInput placeholder="Ex. 204, Sarvo, India"></textarea>

  </mat-form-field>

  

  <button mat-raised-button color="primary">Submit!</button>

</form>


Run this command:

ng serve


I hope this example helps you.