How to Install Material Theme in Angular 17

Websolutionstuff | Mar-29-2024 | Categories : Angular

In this article, we'll install the material theme in angular 17. Material Theme brings a polished design and user-friendly components to your Angular applications, making them not only visually appealing but also highly functional.

In this guide, I'll give you step by step process of installing the angular material theme.

So, let's see Angular 17 install material theme, and how to include angular material in angular 17.

Step 1: Creating Angular 17 Application

First, I'll create a new angular 17 application using the following angular command.

ng new angular-material-example

 

Step 2: Installing Material Design

Then, I'll install material design in the angular 17 application using ng add command. Also, you can install using the npm command. So, run the following command.

ng add @angular/material

 

Step 3: Adding CSS

After installing the material design in the application, I'll import the CSS design on the style.css file.

src/style.css

.user-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}
  
.btn-success {
  width: 100%;
  padding: 10px;
}

h2 {
  font-size: 14px;
  font-weight: bold;
  color: #bbb
}

 

Step 4: Use Material Design

Then, I'll create an input form with material design in angular 17. So, add the following code to app.component.ts.

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FormsModule, MatInputModule, MatButtonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'first-app';
}

src/app/app.component.html

<h2>Angular 17 form using the Material Design components - Websolutionstuff</h2>
<form class="example-form">
  <mat-form-field appearance="fill">
    <mat-label>Name</mat-label>
    <input matInput placeholder="Enter your name">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput type="email" placeholder="Enter your email">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Password</mat-label>
    <input matInput type="password" placeholder="Enter your password">
  </mat-form-field>

  <button mat-raised-button color="primary">Submit</button>
</form>
 
Step 5: Running Angular App

Now, run the angular 17 application using the following command.

ng serve

 


You might also like:

Recommended Post
Featured Post
How To Reset Modal Form In jQuery
How To Reset Modal Form In jQu...

Have you ever seen those pop-up boxes on websites? They're called modal forms, and they make it easier to do things...

Read More

Jan-04-2023

How To Create Dynamic Linechart In Laravel
How To Create Dynamic Linechar...

In this post, we will see how to create a dynamic line chart in laravel. A dynamic line chart or line plot or line...

Read More

Jul-22-2020

Laravel 8 Many To Many Relationship Example
Laravel 8 Many To Many Relatio...

In this example we will see laravel 8 many to many relationship example. Use many to many relationship in lara...

Read More

Nov-15-2021

Laravel 10 AJAX Form Validation Example
Laravel 10 AJAX Form Validatio...

In this article, we will see how to validate the ajax form in laravel 10. Here we will learn about the laravel 10 a...

Read More

Mar-24-2023