How to Split Material Chips On New Line?

Issue

On pressing enter I am in need to split each item on next line. Material Chips. Any pointers on how to get started.

I started with textarea and started writing custom CSS to achieve it. But UI is not as great as Material.

Solution

OLD: For AngularJS Material design

You can add a custom css class over md-chips directive. After that, add css rules to style md-chip child element.

CHECK THIS PLUNKER WITH 3 DIFFERENT EXAMPLES

CSS

.chip-new-line md-chip {
  display: block;
  clear: left;
  float: left;
}

HTML:

<md-chips class="chip-new-line" ng-model="data" placeholder="Enter an animal"></md-chips>

---

NEW: For Angular material

CSS:

.mat-chip-list-wrapper {
  display: block
}

.mat-chip-list-wrapper mat-chip {
  display: block;
  float: left;
  clear: left;
}

.mat-chip-list-wrapper .mat-chip-input {
  width: 100%;
}

/** Just for align close icon/button */
.mat-chip-list-wrapper mat-chip .mat-chip-remove {
  vertical-align: bottom;
}

HTML:

<mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits">
      {{fruit.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
    <input placeholder="New fruit..." [matChipInputFor]="chipList">
</mat-chip-list>

Answered By - The.Bear