I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper).
<div class="flex">
<div class="etc">
<mat-chip-list i18n-aria-label aria-label="Selected Roles">
<form [formGroup]="filterForm" >
<mat-form-field appearance="outline" class="no-line" >
<mat-select
i18n-aria-label
i18n-placeholder
disableOptionCentering
multiple
aria-label="Experience level filter"
formControlName="experienceLevelsFilter"
placeholder="Experience Level"
panelClass="panel-below-field"
(selectionChange)="filterChange($event, 'experienceLevels')"
>
<mat-select-trigger>
Experience Level {{ getSelected("experienceLevels") }}
</mat-select-trigger>
<mat-option
*ngFor="let experienceLevel of experienceLevels"
class="experience-level-option"
[value]="experienceLevel" >
{{ experienceLevel.getName() }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</mat-chip-list>
</div>