Angular Material Chips placeholder

Question

I'm using Angular Material autocomplete chips (https://material.angular.io/components/chips/examples). So there is placeholder which goes up after u click on field. Is it possible to delete this placeholder, so then i can use default placeholder w/o angular material styles ? I've tried to find it inside dev tools, but i couldn't.

Answer 1

if you would like to customise your Angular material components and provide your own stylings for the mat-chips placeholder, I have the following suggestions. You may use one of them.

1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration

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

2) Use ViewEncapsulation:None. This removes all encapsulation, such that CSS rules will have a global effect.

On your component.ts, you will need to import ViewEncapsulation, followed by selecting None when you provide the definitions for encapsulation

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

And on your component.css,

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

3) Customising the MatPlaceholder directive (overriding the Angular Material placeholder css without using !important) [EDIT]

According to the Angular Material Form Field API, it turns out the placeholder directive is accessible once we have imported that module.

On your component.html, include the <mat-placeholder> directive with a custom class within your <mat-form-field>, and remove placeholder from the <input> within the <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>

And on your component.css, define the .placeholder class (assigned to the mat-placeholder directive) with your custom CSS properties.

.placeholder {
  color: green
}

Answer 2

You can add [floatLabel]="'never'" so when enter chip, placeholder will not go up,and not be visible.

Add it to mat-form-field

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