Angular Material Chips to be displayed under the input box

Question

I am using Angular Material to create chips entered in the input field. So, the current default behaviour as given in documentation examples is to display chips inside the input box. I don't want to show those chips inside my input field what I wanna do is when user enters anything, the chip should be created under the input field(not inside the input field). You can just help me with any example link.

Answer 1

If you look at the Angular Material Chip example you can pull the input out of mat-form-field

Update: If you reorder the input element in the example from the docs then the chips appear below the input (where the user enters text) but still part of the component:

<mat-form-field class="example-chip-list">
  <input placeholder="New fruit..."
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]="addOnBlur"
        (matChipInputTokenEnd)="add($event)">

  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
            [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>

That might not get you exactly where you envisioned but I think it gets at the spirit of the solution you're looking for.

See this StackBlitz I tweaked from the example.