Стиль ввода материала угловой

Question

На угловом материале и компоненте ввода (matInput), как я могу изменить стиль всех входных данных в машинописи?

Я пытаюсь таким образом, но он изменяет только первый элемент.

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>

Угловой v7 Материал Угловой v7

Будублагодарен за предложения.

Answer 1

Используйте Renderer2 вместе с ViewChild, чтобы сделать это.

Renderer2 даетПлатформа Agnostic API для изменения DOM и должна использоваться в отличие от собственных document API.

Вы можете внедрить Renderer2 в качестве зависимости в вашем Компоненте, а затем вызвать метод setStyle для него, передавэлемент, на который вы хотите установить стиль, название стиля ('background') и его значение (red в моем примере).

Здесь, попробуйте:

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

}

И в своем шаблоне создайте переменные шаблона, как я делал для тега input с именем food.Это то, что я использую в @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>

---

Вот Рабочий образец StackBlitz для вашей ссылки.