Angular Material: Install Material Theme in Angular

How to Install Material Theme in Angular

In this tutorial, we'll show you how to install Material Theme in Angular 14. Material Theme is a powerful library of pre-built components and styles that can dramatically simplify the process of building beautiful, responsive web applications. Then, we'll guide you through the steps required to install Material Theme in your Angular application and configure some of its core features. 

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</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

Happy Coding !!!

#angular