How to add Angular Material Textbox without any error

Updated on: January 20, 2020

Use the following steps to display Angular Material Textbox on the Angular Website:

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 

Related Articles