Angular 16 Install & Setup Material Theme Tutorial

Angular Material is a design library that provides a set of well-designed UI components and themes to enhance your Angular applications.

Install & setup a material theme in angular 16; In this tutorial, you will learn how to install and setup a material theme in an angular 16 application.

Angular 16 Install & Setup Material Theme Tutorial

Steps to install and setup material theme in angular 16 apps:

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

Step 1 – Create a New Angular Project

Let’s start by creating a new Angular project. Open your terminal and run the following command:

ng new my-app

Step 2 – Install Angular Material

Angular Material provides a set of pre-designed UI components and themes that we can use in our application. To install Angular Material, navigate to your project folder and run the following command:

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 16 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. tutsmake" value="tutsmake">
  </mat-form-field>
  
  <mat-form-field class="example-full-width">
    <mat-label>Address:</mat-label>
    <textarea matInput placeholder="Ex. 204, mumbai, India"></textarea>
  </mat-form-field>
  
  <button mat-raised-button color="primary">Submit!</button>
</form>

Step 5 – Run Angular App

Now that everything is set up, you can run your Angular application:

ng serve

Open your browser and navigate to http://localhost:4200/ to see your Angular app with the Material theme in action.

Conclusion

Congratulations! You have successfully installed and set up an Angular 16 project with a custom Material theme.

Recommended Tutorials