CODEWITHSUNDEEP
angularangular-material
Ethan Jappie
Ethan Jappie

Reputation: 59

Angular 8 Material not rendering

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

But it looks like this: Current UI

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>

Upvotes: 0

Views: 126

Answers (2)

ahmeticat
ahmeticat

Reputation: 1939

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

Upvotes: 1

porgo
porgo

Reputation: 1737

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

Upvotes: 0

Related Questions