Angular 8 Material not rendering

Question

My Angular 8 Material components are not rendering correctly .It should look like the example below:

But it looks like this:

Here is the app.module.ts:

import { FormsModule } from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';

@NgModule({
   declarations: [
   AppComponent,
   LoginComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  FormsModule,
  MatFormFieldModule
],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Here is the app.component.html

<div class="example-container">
<mat-form-field>
    <input matInput placeholder="Input">
</mat-form-field>

<mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>

<mat-form-field>
    <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
    </mat-select>
</mat-form-field>

example theme: @import "~@angular/material/prebuilt-themes/indigo-pink.css"; — Nadhir Falta
– Nadhir Falta, Commented Nov 28, 2019 at 6:54
Yes I have,I imported the deeppurple-amber theme in the styles.scss — Ethan Jappie
– Ethan Jappie, Commented Nov 28, 2019 at 6:55

ahmeticat · Accepted Answer · 2019-11-28 07:09:12Z

1

I think you should use MatSelectModule and MatInputModule

Because MatFormModule used for Matform

So your module should be like this

import { FormsModule } from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';

import {MatSelectModule,MatInputModule} from '@angular/material/form-field';

@NgModule({
   declarations: [
   AppComponent,
   LoginComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  FormsModule,
  MatFormFieldModule,
  MatSelectModule,
  MatInputModule
],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

and also you can import css in style.css file

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

WORKING DEMO

edited Nov 28, 2019 at 7:09

answered Nov 28, 2019 at 6:47

ahmeticat

1,9391 gold badge16 silver badges29 bronze badges

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

7 Comments

Ethan Jappie Over a year ago

I have added the missing modules but it has made no difference

Ethan Jappie Over a year ago

Your demo is working. I see that all my styles end in scss as apposed to you css. Would that be an issue?

Ethan Jappie Over a year ago

I have copied your working code over to my app but it doesnt seem to work. Could I be missing some imports or modules?

ahmeticat Over a year ago

Do you get an any exception?

Ethan Jappie Over a year ago

No exceptions, it runs as normal but is not showing correctly

|

porgo · Accepted Answer · 2019-11-28 06:46:50Z

0

You have to add MatInputModule (for input and textareas) and MatSelectModule (for select) to your app.module.ts file.

You can see what is needed for component at the top of this pages:

material input component

material select component

answered Nov 28, 2019 at 6:46

porgo

1,7513 gold badges19 silver badges30 bronze badges

1 Comment

Ethan Jappie Over a year ago

I have added the modules as you have advised but it has made no difference

Collectives™ on Stack Overflow

Angular 8 Material not rendering

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related