Angular 16 Install & Setup Material Theme Tutorial

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *