CODEWITHSUNDEEP
angularangular-materialangular-material2
LaSul
LaSul

Reputation: 2411

Angular Material 2 md-input-container not working

I'm encountering an issue with angular-material2 where I'm trying to use an input. However, none of what I tried has worked.

I'm getting this issue:

'md-input-container' is not a known element

Console issue

HTML:

<md-input-container>
<input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>

I imported this in my component.ts and in my app.ts:

import { MdInputModule } from '@angular/material';

and I declared it in my 'imports' in @NgModule in app.ts

My version of material is @angular/[email protected]

Thanks for your help.

EDIT : I found that I imported it in the app.module.ts which imported another module where I needed to put the declarations. My code is a bit messy, I need to clear it up. Sorry for this my friends. Case closed.

Upvotes: 2

Views: 6210

Answers (5)

DevLoverUmar
DevLoverUmar

Reputation: 13933

Instead of md-input-container or mat-input-container, use mat-form-field. As its the current supported input container as per release version 8.0.0. For more info, see official angular material doc

Upvotes: 0

FAISAL
FAISAL

Reputation: 34673

import { MdInputModule } from '@angular/material';

And add MdInputModule in imports: [ MdInputModule ] in @NgModule in app.ts

Upvotes: 2

Andrei Matracaru
Andrei Matracaru

Reputation: 3671

The way you did it is correct, by importing only the module of the component you use. Importing the whole MaterialModule is overkill if you use only one or two components. What you need to make sure is this (from the Getting Started guide, step 3):

Whichever approach you use, be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules.

Upvotes: 0

Adrien PESSU
Adrien PESSU

Reputation: 557

You should put MdInputModule in the import of app.module.ts. And you should also import every single modules of the Material elements you use

Upvotes: 1

Liyaquet Hussain
Liyaquet Hussain

Reputation: 101

Import Material module into your app to access core directives of material

import { MaterialModule } from '@angular/material';

Upvotes: -2

Related Questions