[Fixed] Automatically Resizing Mat-Select-trigger which wraps content


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 fxLayoutAlign="row-wrap"


 <div fxLayout="row wrap"

Leave a Reply

(*) Required, Your email will not be published