Angular4 Material Input not displaying properly

Question

I'm trying to put Material in an angular4 project where i copy/pasted the exampel with a table. The programmatic part is working as expected when i type a customer name (it filters as it should) and the table below shows perfectly good. The problem is that the matInput inside the mat-form-field is not displayed correctly. When you type something the typed text overlays the placeholder, instead of the placeholder going floating up. Here is my code and screenshot of the problem.

Console shows no errors or anything, everything seems to be working fine, it's a css issue with the input field what i'm facing.

Here is my component code .html

        <app-topmenu></app-topmenu>
<br><br>
<div class="container">
    <div>
        <div class="col-xs-12">
            <div class="example-container mat-elevation-z8">
              <div class="example-header">
                <mat-form-field>
                  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Customer Name">
                </mat-form-field>
              </div>


            </div>

        </div>
    </div>
</div>

Here is my component .ts code

import { Component, OnInit } from '@angular/core';
import { MainconfService } from '../services/mainconf.service';
import {MatTableDataSource} from '@angular/material';
import {MatInputModule} from '@angular/material/input';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

    displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }

  constructor(public mainconf: MainconfService ) {

   }




  ngOnInit() {
       this.mainconf.authenticate();
  }






}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

Here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LogoffComponent } from './logoff/logoff.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
// import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ApiService } from './api.service';
import { MainconfService } from './services/mainconf.service';
import { TopmenuComponent } from './topmenu/topmenu.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule, MatCardModule, MatTableModule, MatFormFieldModule, MatInputModule  } from '@angular/material';

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'logoff', component: LogoffComponent },
  { path: '**', component: LoginComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    LogoffComponent,
    TopmenuComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only
  ),

  // NgbModule.forRoot(),
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatCardModule, MatTableModule, MatFormFieldModule , MatInputModule

  ],
  providers: [ApiService, MainconfService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I found the problem, I'll state in case someone is in similar situation.

I need to place

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

inside styles.css (which I havent before).