CODEWITHSUNDEEP
htmlcssangularmat-form-field
Aditya0033
Aditya0033

Reputation: 117

How to remove Mat-form-field-wrapper from Mat-form-field?

i am using Angular mat-form-field and after css change to make it look like mat-chip, i want to get rid of this outer box (mat-form-field-wrapper).

Need to get rid of the 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>

Upvotes: 2

Views: 1195

Answers (1)

Stack7
Stack7

Reputation: 62

Please remove mat-chip-list tag and it should work fine.

Code:

<div class="flex">
 <div class="etc">
  <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>
</div>

Upvotes: 1

Related Questions