Placeholder text not visible for mdInput (material design for Angular2)

Question

Update: I have now made the two completely identical. My local version being served with npm run lite and the Plunker version are 100% the same and yet my local version does not get the placeholder text.

I have a large Angular2 (2.4.9) application going and I started using Google's @angular/material (2.0.0-beta.2) - specifically their mdInput.

I noticed that the placeholder text is not visible unless I add css like input::-webkit-input-placeholder{ color:black;}, but then it does not disappear when the user clicks in the field (when the animation starts that moves it to float above the input), it only disappears when the user starts typing.

I then pulled apart my very large application to get as minimal an example as possible so I could post a plunker of this. The version running locally and the Plunker version are now 100% the same.

So why does the Plunker example work but not my local version?

Here are the ALL the differences (After updates, no differences remain between Plunker and local version.):

app.component.ts: (moved file out of sub directory and served directly, not from build folder. Plunker and local are now identcal)

index.html: (Updated so these are now identical, problem remains)

systemjs.config.js: (Updated so these are now identical. Moved components into root directory to match Plunker. Problem remains.)

Packages section in my file: (Updated so they are now identical.)

Full plunker files:

app.component.html:

<div>

<md-input-container>
  <input mdInput placeholder="Favorite food">
</md-input-container>

<div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl:'./app.component.html'
})
export class AppComponent { 

}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import {MaterialModule } from '@angular/material';
import { AppComponent } from './app.component';


@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule,
    MaterialModule,
    ],
  declarations: [

    AppComponent

    ],
  providers: [

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

index.html

<!DOCTYPE html>
<html>
<head>

    <title>Test</title>
    <meta charset="UTF-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>


  <script src="systemjs.config.js"></script>

    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>

  <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

</head>

  <body>
    <app>Loading...</app>
  </body>
</html>

main.ts

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

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule)
    .then(success => console.log("Bootstrap success"))
    .catch( err => console.log(err));

systemjs.config.js

(function (global) {
  System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
    // map tells the System loader where to look for things
    map: {
      'app':'.',
    // Angular specific mappings.
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',

    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs',      

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      '.': {
        defaultExtension: 'ts'
      },
      rxjs: { 
        defaultExtension: 'js'
      }
    }
  });
})(this);

score 3 · Accepted Answer · answered Mar 08 '17 at 00:44

OK - Answering my own question in case some other poor person runs into this.

I was missing one thing between the two. One thing that made no difference in any other case and the only symptom I could find was that I didn't get the placeholder text on mdInput.

At the top of my index.html file, I needed this:

<!DOCTYPE html>

I found this while creating a github repo to share and show the problem.

I know it is required - I'm just surprised I got this far and this was the only issue I ran into. Burned a day on this! Hopefully I save one other person from the same fate...

Hi.. can u mark as answered? this is the correct answer! thanks! — mariomol, Apr 16 '17 at 12:19

score 1 · Answer 2 · answered Jul 04 '17 at 15:29

1

This problem also happens if you don't include animations module, like in this thread (just in case someone else gets here and the above solution don't fix the problem).

answered Jul 04 '17 at 15:29

Elvis Fernandes

1,108
10
21

Placeholder text not visible for mdInput (material design for Angular2)

2 Answers2