Angular 8 Input Material not styled

Question

Currently the input field looks like this:

One of my components has the following HTML:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

My app.module.ts has the follwing:

Any reason why the input is not styled like in the examples?

did you included the material library with the ng add @angular/material command? it could be that you forgot to import the material theme if you had imported it by hand — Andrei
– Andrei, Commented Dec 12, 2019 at 9:09
i added the ng add @angular/material command before (indigo/pink) theme; nothing changed — Naffets
– Naffets, Commented Dec 12, 2019 at 9:11
Do you have 'FormsModule' or/and 'ReactiveFormsModule' also imported? — Pedro Bezanilla
– Pedro Bezanilla, Commented Dec 12, 2019 at 9:14

Rohan Kumar · Accepted Answer · 2019-12-12 09:47:53Z

1

Try to import Material Form Field Module in your NgModule. Also it is required to add Material CSS in your style.scss

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

And in app.module.ts add MatInputModule

import {MatInputModule,MatFormFieldModule} from '@angular/material';

// ....
imports: [
    MatFormFieldModule,
    MatInputModule,
    ...
],

Refer to the docs: Form-Field, and Example

edited Dec 12, 2019 at 9:47

answered Dec 12, 2019 at 9:22

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rohan Kumar Over a year ago

Do you have any online demo like on stackblitz ?

Naffets Over a year ago

@rohan-humar not sure how to add ng add @angular/material to stackblitz

Rohan Kumar Over a year ago

I have updated my answer. Please add Material CSS, and MatInputModule in your application.

Naffets Over a year ago

The styles.css already contains @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in the image in the post MatInputModule,MatFormFieldModule are included :) I will try to set up a stackblitz

Rohan Kumar Over a year ago

Please see the demo on stackblitz.com/edit/angular-avlgjh

|

Collectives™ on Stack Overflow

Angular 8 Input Material not styled

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related