Angular Material 2 md-input-container not working

Question

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

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.

Answer 1

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

Answer 2

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

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

Answer 3

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.

Answer 4

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

Answer 5

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

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