angular mat form field textmask code example

Example 1: mat-input mask

npm install --save ngx-mask
...
@NgModule({
  imports: [
    NgxMaskModule.forRoot(),
  ],
})
...
<input type="text" mask="9999999-9999" />

Example 2: stylin mat input

//Standard
  .mat-form-field {
    .mat-input-element {
      color: slategray;
    }
    .mat-form-field-label {
      color: slategray;
    }
    .mat-form-field-underline {
      background-color: slategray;
    }
    .mat-form-field-ripple {
      background-color: slategray;
    }
    .mat-form-field-required-marker {
      color: slategray;
    }
  }

  //Focus
  .mat-form-field.mat-focused {
    .mat-form-field-label {
      color: #ff884d;
    }
    .mat-form-field-ripple {
      background-color: #ff884d;
    }
    .mat-form-field-required-marker {
      color: #ff884d;
    }
    .mat-input-element {
      color: #ff884d;
    }
  }

  //Error
  .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
      color: #ff33cc;
    }
    .mat-form-field-label {
      color: #ff33cc;
      .mat-form-field-required-marker {
        color: #ff33cc;
      }
    }
    .mat-form-field-ripple {
      background-color: #ff33cc;
    }
  }