Angular Material - MdInput to MatInputModule?

5
votes

What I'm Using

  • Angular
  • Angular Material ^2.0.0-beta.12

What I'm doing

  • I just started a new project and installed material

  • When copying some syntax from a previous project, I get an error when trying to import

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

  • After digging through the typings, it looks as though it's now changed to 'MatInputModule'
  • I've updated my module to use 'MatInputModule'
  • Now the HTML throws an error

'md-form-field' is not a known element:

  • This is using the syntax provided from the material website

HTML

<form [formGroup]="albumEdit">
  <md-form-field>
    <input mdInput formControlName="albumTitle" placeholder="Album Title">
  </md-form-field>
</form>

Questions

  1. Am I missing something obvious here?
  2. What's the best way to implement the material components in the latest build?
  3. Is there some official documentation that I'm missing?
1
angularangular-materialangular-material2

1 Answers

6
votes

Since 2.0.0-beta.12, Md prefix has been removed in favor of Mat prefix. See this CHANGELOG:

Breaking Changes All "md" prefixes have been removed.Change md prefix to mat:

In your typescript, 

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

and in you template: 

<mat-form-field>
    <input matInput formControlName="albumTitle" placeholder="Album Title">
</mat-form-field>

The documentation on the website is outdated and needs to be update with mat prefix.