Блог

Я использую чипы автозаполнения Angular Material (https://material.angular.io/components/chips/examples ). Итак, есть заполнитель, который появляется после того, как вы нажимаете на поле. Возможно ли удалить этот заполнитель, чтобы я мог использовать заполнитель по умолчанию без стилей angular material? Я пытался найти его в инструментах разработчика, но не смог.

если вы хотите настроить свои компоненты Angular material и предоставить свои собственные стили для заполнителя mat-chips, у меня есть следующие предложения. Вы можете использовать один из них.

1) Перезапишите классы на вашем основном style.css (или style.scss, в зависимости от того, что вы используете). Если вам интересно, это тот, который находится на том же уровне каталога, что и ваш index.html , main.ts, package.json и т.д. Возможно, вам потребуется добавить !important объявление

 .mat-form-field-label {
  color:blue!important;
}
  

2) Использовать ViewEncapsulation:None . Это удаляет всю инкапсуляцию, так что правила CSS будут иметь глобальный эффект.

В вашем component.ts вам нужно будет импортировать ViewEncapsulation , после чего выберите «Нет», когда вы предоставляете определения для инкапсуляции

 import { .. ViewEncapsulation } from '@angular/core';
.
.
@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
  encapsulation: ViewEncapsulation.None
})
  

И на вашем компоненте.css,

 .mat-form-field-label {
   color:blue!important;
 }
  

3) Настройка MatPlaceholder директивы (переопределение css-заполнителя Angular Material без использования !важно) [РЕДАКТИРОВАТЬ]

Согласно API поля формы Angular Material, оказывается, что директива placeholder доступна после того, как мы импортировали этот модуль.

На вашем component.html включите <mat-placeholder> директиву с пользовательским классом в свой <mat-form-field> и удалите заполнитель из <input> в <mat-chip-list>

 <mat-form-field class="example-chip-list">
  <mat-placeholder class="placeholder">Search</mat-placeholder>
  <mat-chip-list #chipList>       
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
  

И в вашем component.css определите .placeholder класс (назначенный директиве mat-placeholder) с вашими пользовательскими свойствами CSS.

 .placeholder {
  color: green
}
  

Вы можете добавить [floatLabel]="'never'" , чтобы при вводе чипа заполнитель не поднимался вверх и не был виден.

Добавьте его в mat-form-field

 <mat-form-field class="example-chip-list" [floatLabel]="'never'"></mat-form-field>