样式输入材料角度

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.

Answer 1

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.