Error using md-input-container

Question

I created the Angular 2 material app at https://github.com/angular/material2/blob/master/GETTING_STARTED.md .

I can use <md-card>, <md-toolbar>, <md-input> , etc. But when I use <md-input-container> , it throws an error like

 zone.js:388 Unhandled Promise rejection: Template parse errors: 'md-input-container' is not a known element: 

Here are the details from packages.json,

 "dependencies": { "@angular/common": "~2.1.0", "@angular/compiler": "~2.1.0", "@angular/core": "~2.1.0", "@angular/forms": "~2.1.0", "@angular/http": "~2.1.0", "@angular/material": "^2.0.0-alpha.11-3", "@angular/platform-browser": "~2.1.0", "@angular/platform-browser-dynamic": "~2.1.0", "@angular/router": "~3.1.0", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "ng2-file-upload": "^1.1.4-2", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, 

How can i fix this?

https://github.com/angular/material2/tree/master/src/lib/input says that the md input is outdated and uses the md-input-container.

Answer 1

I think this may not work, because those changes were not made in 2.0.0-alpha.11 .

https://github.com/angular/material2/compare/2.0.0-alpha.11...master

We will have to wait until the next release for npm becomes cointain, but I'm not sure about that.

Answer 2

It worked for me.

app.module.ts

 import { MaterialModule } from '@angular/material'; ... @NgModule({ imports: [ MaterialModule ] }) 

app.component.html

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

The main thing here is to make sure that you add this to the beginning of your index.html.

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">