DEV Community

Cover image for Angular material tutorial with Example - Angular 11
Robert Look
Robert Look

Posted on

Angular material tutorial with Example - Angular 11

In This tutorial, you need to see an example of how to install angular material in angular 11. let's discuss the angular material tutorial. you will learn how to use material design in your project. follow the bellow step for install material design in angular 11.

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

Angular Material Tutorial With Example - Angular 11

Open Command promt and run

ng add @angular/material

This is image title

src/style.css

/* Add application styles & imports to this file! */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Enter fullscreen mode Exit fullscreen mode

Use Material Design
Then, Change
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 { }
Enter fullscreen mode Exit fullscreen mode

src/app/app.component.html

<h1>how to install angular material design - phpcodingstuff.com</h1>

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Name:</mat-label>
    <input matInput placeholder="Ex. Robert" value="Robert">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Address:</mat-label>
    <textarea matInput placeholder="Ex. New Your , USA"></textarea>
  </mat-form-field>

  <button mat-raised-button color="primary">Submit!</button>
</form>
Enter fullscreen mode Exit fullscreen mode

This is image title

Original source : https://www.phpcodingstuff.com/blog/angular-material-tutorial-with-example-angular-11.html

Top comments (0)