How to Install Material Theme in Angular 14

Install material theme in angular 14; Through this tutorial, we will learn how to install and use theme in angular 14.

How to Install Material Theme in Angular 14

Follow the following steps to install and use material theme in angular 14:

• Step 1 – Create New Angular App
• Step 2 – Install Material Design
• Step 3 – Import CSS
• Step 4 – Import Material Design Libraries
• Step 5 – Run Angular App

Step 1 – Create New Angular App

First of all, open terminal and execute the following command on command line to create new angular app:

ng new my-app

Step 2 – Install Material Design

Then execute the following command on command line to install material design:

ng add @angular/material

Step 3 – Import CSS

 Import css design on style.css file. So open style.css file and import the following css into it:

/* 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%;
}

Step 4 – Import Material Design Libraries

Now, import material design libraries into app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { FormsModule } from '@angular/forms';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule, 
    MatInputModule, 
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that, add the following code into app.component.html file:

<h1>Angular 14 Install Material Design Example - tutsmake.Com</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>

Step 5 – Run Angular App

Finally, execute the following command on the command line to start angular app:

ng serve