Style input material angular

Question

On the angular material and the input component (matInput) how can I modify the style of all inputs in typescript?

I'm trying this way, but it only modifies the first element.

ngAfterViewInit () {
    const matlabel = this.elRef.nativeElement.querySelector ('.mat-form-field-label');
    matlabel.style.color = 'white';
  }

=====================

<form [formGroup]="form" (ngSubmit)="login()">
      <table cellspacing="0" class="tb-login">
        <tr>
          <td>
            <mat-form-field class="form-login">
              <input matInput type="text" placeholder="Login" formControlName="login"  class="input-login"/>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field  class="form-login">
              <input matInput type="password" placeholder="Password" formControlName="password"   class="input-login"/>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <button mat-raised-button type="submit" class="btn_login">Login</button>
          </td>
        </tr>
      </table>
    </form>

Angular v7 Material Angular v7

I will be grateful for suggestions.

For change the styles of material inputs with css => https://stackoverflow.com/a/54409733/2736742 — A. Morel, Jan 28 '19 at 20:24

SiddAjmera · Answer 1 · 2018-12-05T16:54:57.823

Use Renderer2 along with ViewChild to do this.

Renderer2 gives Platform Agnostic APIs to modify the DOM and should be used as opposed to the native document APIs.

You can inject Renderer2 as a dependency in your Component and then call the setStyle method on it passing the element you want to set the style on, name of the style('background') and the value of it(red in my eg).

Here, give this a try:

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Component({...})
export class InputOverviewExample {

  @ViewChild('food') matInput: MatInput;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setStyle(this.matInput.nativeElement, 'background', 'red');
  }

}

And in your Template, create template variable(s) like I've done on the input tag with the name food. This is what I'm using in @ViewChild('food'):

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #food matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

Here's a Working Sample StackBlitz for your ref.

Very good! In this example I have two fields / inputs do I need to reference for each one? Example # field1 and # field2 or is there a way to apply the style to all of the html inputs in question? — lams, Dec 05 '18 at 17:01
I actually tried using `MatInput` but apparently doesn't work that way as accessing it via `ViewChild` returns `undefined`. So yeah, if you have two fields, then you'll have to do it this way only by defining two properties on your Component Class. — SiddAjmera, Dec 05 '18 at 17:03
OK! This way I saw that I can change the color of the background, but could you tell me how to change the color of the label and input line? — lams, Dec 05 '18 at 17:09

Style input material angular

1 Answers1