ItSolutionStuff.com

Angular 11 Install Material Design Tutorial

By Hardik Savani β€’ May 1, 2024
Angular

Hi All,

If you need to see example of how to install angular material in angular 11. let’s discuss about angular 11 install material design. let’s discuss about how to install material design in angular 11. you will learn angular 11 install material tutorial. follow bellow step for install material design in angular 11.

we will create new angular 11 project using ng new command and then after we will install material design using ng add command. After that we will create very simple input form example with button.

So let's see bellow few step to install material design in angular 11 application.

Create New Project

Here, we will create new angular 11 project using following command:

ng new my-app

Install Material Design

Here, we will install material design in angular 11 application using ng add command. so let's run following command and install everything, you can also see bellow screenshot that asking you when you install material design.

ng add @angular/material

Import CSS:

In this step, we need to import css design on style.css file. let's import:

src/style.css

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

}

Use Material Design

Now we will create simple example of material design with input form so let's upload ts file and html file as like bellow:

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatInputModule} from '@angular/material/input';

import {MatButtonModule} from '@angular/material/button';

@NgModule({

imports: [ BrowserModule, FormsModule, MatInputModule, MatButtonModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

src/app/app.component.html

<h1>Angular 11 Install Material Design Example - ItSolutionStuff.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>

Now we are ready to run our app. so let's run app:

ng serve

You can see layout as like bellow:

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

πŸ“Ί Subscribe on YouTube

We Are Recommending You

β˜…

Angular 11 Reactive Forms Validation Example

Read Now β†’
β˜…

Angular 11 Add Bootstrap Example

Read Now β†’
β˜…

Angular Upgrade | How to upgrade from Angular 10 to 11 ?

Read Now β†’
β˜…

Angular 11/10 Material Badge Example Tutorial

Read Now β†’
β˜…

Angular Material Divider Example | Angular mat-divider

Read Now β†’
β˜…

Angular Material Checkbox Example

Read Now β†’
β˜…

Angular Material Slide Toggle Example

Read Now β†’
β˜…

Angular Material Textarea Tutorial

Read Now β†’
β˜…

Angular Material Radio Button Example

Read Now β†’
β˜…

Angular Material Input Box Example

Read Now β†’
β˜…

Angular Material Mat-Select with Reactive Form Example

Read Now β†’
β˜…

Angular Material Datepicker Example

Read Now β†’