Input element with mdInput inside md-input-container does not display the placeholder when field is empty

[rahulsethi-daffodilsw]

Input element with mdInput inside md-input-container does not display the placeholder when field is empty

Just started with Angular 2 and material design after working with material in React.js apps. First impression of angular/material2 does not seem to be good as it's React counterpart.

So here's what is happening... there is no grey placeholder when the input field is empty and unfocused. Please see the image below:

It only jumps out above when the field is not empty or focused

Here is the code below:

import { Component } from '@angular/core';
import '../styles/styles.scss';

@Component({
  selector: 'my-app',
  template: `<div>
      <p>
      <md-input-container>
        <input mdInput placeholder="Name" />
      </md-input-container>
      </p>
      <p>{{name}}</p>
  </div>`,
})
export class AppComponent {
  title: string = 'Minimal Angular 2 setup with Webpack';
  name = null;
}

[benb7760]

@rahulsethi-daffodilsw Can you check your doctype? #3196

[rahulsethi-daffodilsw]

@benb7760 Thanks. Resolved. Thanks to @crisbeto for noticing.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}