How to Split Material Chips On New Line? - angularjs

Question

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.

Answer 1

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>