Angular material tutorial with Example - Angular 11

Angular material tutorial with Example - Angular 11

Today in this post we learn how to install angular material in angular 11. Material design uses an Angular CLI project. Step by step angular material tutorial.

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 '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

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 { }

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>

This is image title

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

angular node material

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular 10 Material Table with Pagination, Filtering, Sorting

Angular material table is an inbuilt component that can be used to create a table where user can searching, sorting, filtering, and paging rows.

Let's implement a Theme Switch like the Angular Material Site

Implement a Theme Picker from scratch, for your Angular App. Here's a beginners guide and you'll get to know the best practices to follow along the way.

Angular Node MySQL Login System - Angular Material Reactive Form

In this video we will create the UI with Angular Material and Reactive Forms.

Angular Material 10 Dynamic Checkbox Tutorial with Example

In this Angular 10 tutorial, i will walk you through creating a dynamic checkboxes list using Angular Material 10. Angular Material 10 Dynamic Checkbox Tutorial with Example