How to Customize Angular Material's Input/Md-Input-Container Component

How do I change md-input-container placeholder color using css in angular material?

Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.

As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.

So you just need to apply this CSS:

/* When the input is not focused */
md-input-container label {
  color: red;
}

/* When the input is focused */
md-input-container.md-input-focused label {
  color: blue;
}

Have a look at this Plunkr Demo.

angular 4 md input container

All you need to do is just replacing html codes with angular material components. Angular material components have support for form controls. For example;

<div [formGroup]="form">
     <div [ngSwitch]="question.controlType">
          // You can use components by wrapping with `ng-template`
          <ng-template *ngSwitchCase="'textbox'">
               <md-input-container>
                    <input mdInput placeholder="{{question.label}}" [formControl]="yourFormControlName">
               </md-input-container>
          </ng-template>
          // Or like this
          <md-checkbox *ngSwitchCase="'checkbox'">
               {{question.label}}
          </md-checkbox>
          //...
     </div>
</div>

This section has lots of examples about usage, you can combine them with dynamic forms easily.

Angular Material 2 md-input-container not working

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

And add MdInputModule in imports: [ MdInputModule ] in @NgModule in app.ts

Change angular material input style

This is the CSS selector used by Angular Material:

md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-color: your_color_here;
}

For what controls should I use md-input-container

md-input-container has to be a parent container for any type of input (text, number, date, etc) in order to get that material look and feel.

However, if you do not need these material-styled placeholders, labels and validation, you can still use input which is not nested in the container. That was the case in the Sliders example.

---

Related Topics