Angular 2 Material 'Input' placeholder is not floating on focus

Question

The placeholder in the textbox isn't floating on focus as shown in the screenshot below.

_{Click to view full screenshot}

Here is my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatCheckboxModule, MatInputModule, MatListModule, MatCardModule, MatButtonModule, MdDatepickerModule, MdNativeDateModule, MatIconModule, MatTabsModule } from '@angular/material';
import { FormsModule,  ReactiveFormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes';

@NgModule({
  declarations: [
      AppComponent
  ],
  imports: [
      BrowserModule,
      RouterModule.forRoot(AppRoutes),
      BrowserAnimationsModule,
      MatCheckboxModule,
      MatInputModule,
      MatCardModule,
      MatButtonModule,
      MdDatepickerModule,
      MdNativeDateModule,
      MatIconModule,
      MatTabsModule,
      MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is how I use it:

login.component.html :

<md-card>
    <md-card-header>
        <h2>Login</h2>
    </md-card-header>

    <md-card-content>
        <div class="divInput">
            <md-input-container>
                <input mdInput type="text" placeholder="Login ID">      
            </md-input-container>

        </div>
        <div class="divInput">
            <md-form-field>
                <input mdInput type="password" placeholder="Password">
            </md-form-field>
        </div>
    </md-card-content>
    <md-card-actions>
        <button md-button>LIKE</button>
    </md-card-actions>
</md-card>

Am I missing anything required? Could it be because I'm missing some required modules?

Answer 1

I was facing the same issue, Add the below given import statement to style.css . This have fixed my issue.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

I guess this should solve your problem.