Angular Material Form Example Swalne

Example 1: angular material input

Html 
        Favorite food                 Leave a comment         
  TS import {Component} from '@angular/core';  /**  * @title Basic Inputs  */ @Component({   selector: 'input-overview-example',   styleUrls: ['input-overview-example.css'],   templateUrl: 'input-overview-example.html', }) export class InputOverviewExample {}  CSS .example-form {   min-width: 150px;   max-width: 500px;   width: 100%; }  .example-full-width {   width: 100%; }

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;     }   }