I am currently experimenting with an Angular Mat-Select which takes multiple selections and am using a custom Mat-Select-Trigger to display the values in the value field. I would like the value field of the Mat-Select to automatically resize (similar to a textarea cdkTextAreaAutoResize) and wrap the selected values into a new row when the content size exceeds that of the field.
For the sake of demonstrating what i mean i have setup a Stackblitz here:
Basically i would like that placeholder for the selected values wraps the selected items and stacks them in a new row, automatically resizing the mat-select-trigger until all the values fit. I tried playing around with fxLayout and flexBox but didn’t have any luck. Any help would be greatly appreciated.
Just change your trigger outer div from
<div fxLayout="row wrap"