How to change the underline color of md-input-container in angular4?

Question

I have been reading the docs for this (https://material.angular.io/components/input/overview) There is a section that says how to change the color of the line at the bottom of the md-input-container. But it is not clear to me what an attribute is nor is there a code example to refer to. It says the underline color can be changed using the color attribute of the md-input-container. In addition what I mean by underline is the animated underline that expands out as visible in the provided link. Could somebody explain more clearly what the attribute of md-input-container is, or provide some code. I have tried adding a directive called color, changing the color of md-input-container in css, amongst other things and I am not succeeding at this. If somebody could explain/show some code that demonstrates this, that would be very helpful. Thanks!

Here is some code, which I feel should work, based on the wording of that text. But it does not.

  <md-input-container
    color="yellow"
    class="input-half-width">
    <input
      [(ngModel)]="driftInfo.title"
      name="title"
      mdInput
      placeholder="Ange rubrik"
    >
  </md-input-container>

Answer 1

Change Colour Of Md-Input and Label When MAT-FOCUSED :

label on focus colour change:

.mat-focused .mat-form-field-label {
    color: #027D7C !important;
}

Input on focus colour change:

.mat-form-field-ripple {
    background-color: #027D7C !important;
}