Automatically Resizing Mat-Select-trigger which wraps content

Question

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:

https://stackblitz.com/edit/angular-ivy-u5yos6

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.

Trismuto Trismuto · Accepted Answer · 2021-03-16T22:43:05

Just change your trigger outer div from

<div fxLayoutAlign="row-wrap"

to

 <div fxLayout="row wrap"

Automatically Resizing Mat-Select-trigger which wraps content

1 Answers