Reset igx-select

Question

Since I could not find any information, I am writing here. How can I reset a selected value of igx-select using typescript:

Here is my HTML-Code:

        <igx-select #selectDepartment
             placeholder="Wähle Abteilung"
             [overlaySettings]="overlaySettings"
             [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']"
             [(ngModel)]="cell.value">
         <igx-select-item style="font-size: 12px;" *ngFor="let item of arrayDepartments" [value]="item">
           {{ item }}
         </igx-select-item>
       </igx-select>

Is there any way to delete the value of the cell and show the placeholder when for example a button is clicked?

This is the API documentation that lists all available properties, methods and events. clearSelection() is one of them: https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxSelectComponent.html#clearSelection — Zdravko Kolev, Sep 08 '22 at 10:40

score 2 · Answer 1 · answered Jul 19 '22 at 08:16

You can use the clearSelection method exposed by the IgxSelectComponent.

<igx-select #selectDepartment
     placeholder="Wähle Abteilung"
     [overlaySettings]="overlaySettings"
     [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']"
     [(ngModel)]="cell.value">
 <igx-select-item style="font-size: 12px;" *ngFor="let item of arrayDepartments" [value]="item">
   {{ item }}
 </igx-select-item>
</igx-select>
<button igxButton (click)="reset(selectDepartment)">Reset</button>

public reset(select: IgxSelectComponent) {
    select.clearSelection();
}

Here's a stackblitz example.

Reset igx-select

1 Answers1