How to add Angular Material Textbox without any error

In the Angular application, most of the developers prefer Angular Material as UI tool to show the Form Controls such as Textbox, Checkbox, Select Dropdowns, following article will help you to Add Angular Material to your Angular application and add the Angular Material design textbox on the form:

Step 1: Install Angular material using following command in your project, it will add required changes to package.json & angular.json files: 

ng add @angular/material

Step 2: Add the following required Modules into app.module.ts configuration file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';

Add the "BrowserAnimationsModule" & "MatInputModule" in the @NgModule imports declaration.

Step 3: Add the following CSS file path in angular.json file in Styles declaration if it is not already added. If you miss adding this CSS file path, then it will not display the textbox properly.

 "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

Step 4: Add the following Angular Material Textbox of "outline" appearance code in your app.component.html file to show on web page:

 <mat-form-field appearance="outline">
        <mat-label>User Name</mat-label>
      <input matInput>
 </mat-form-field>

For output and sample code demonstrating Angular Material Textbox of outline appearance visit: https://stackblitz.com/edit/angular-material-display-outline-textbox