CODEWITHSUNDEEP
angulartypescriptangular-material
Robinhood
Robinhood

Reputation: 899

How to remove material input style from Angular material chip?

I'm using material chips to give multi-select functionality in one of my forms.

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

The problem I'm facing is the material stying in the input field.

enter image description here

This material input field disturbs the form look and feel. How do I use a custom input field instead of material input?

Upvotes: 0

Views: 1161

Answers (1)

Andres David Lopez
Andres David Lopez

Reputation: 11

The mat-form-field has an attribute called appearance

Change it to:

<mat-form-field class="example-chip-list" appearance="fill">

And use css to remove the underline

::ng-deep .mat-form-field-underline {
  display: none;
}

Upvotes: 1

Related Questions