title: Angular Material 2: 'md-input' is not a known element
body: <p>What am I missing here? Should <code>md-input</code> be individually loaded in the <code>module</code> file?</p>
  
  <p><strong>This works:</strong></p>
  
  <pre><code>&lt;md-input-container&gt;
    &lt;input mdInput name="username" placeholder="Username" [(ngModel)]="username" #name="ngModel" required&gt;          
  &lt;/md-input-container&gt;
  </code></pre>
  
  <p><strong>However, this fails:</strong></p>
  
  <pre><code>&lt;md-input placeholder="amount" align="end"&gt;
    &lt;span md-prefix&gt;$&amp;nbsp;&lt;/span&gt;
    &lt;span md-suffix&gt;.00&lt;/span&gt;
  &lt;/md-input&gt;
  </code></pre>
  
  <p>with the following error:</p>
  
  <pre><code>Unhandled Promise rejection: Template parse errors:
  'md-input' is not a known element:
  1. If 'md-input' is an Angular component, then verify that it is part of this module.
  2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    &lt;/div&gt;
    &lt;div&gt;
      [ERROR -&gt;]&lt;md-input placeholder="amount" align="end"&gt;
        &lt;span md-prefix&gt;$&amp;nbsp;&lt;/span&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { CommonModule }   from "@angular/common";
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from "@angular/forms";
  import { MaterialModule } from "@angular/material";
  
  import { AppComponent }  from './app.component';
  
  import "hammerjs";
  
  @NgModule({
    imports:      [ 
      CommonModule,
      BrowserModule, 
      FormsModule,
      MaterialModule.forRoot() 
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>