如何以角度重置ng-select

Question

I want to reset ng-select when I click on clear button my code is as below:

<ng-select (change)="setFilter('','')" 
           [items]="eventType"
           bindLabel="name"
           bindValue="id"
           placeholder="Select Event Type"
           [(ngModel)]="event_type" id="eventType">
</ng-select>
<button class="acq-btn acq-btn-default"(click)="clearFilter()">Clear</button>

Function which I've created is as below:

eventType = [
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = '';
    this.setFilter('','');
}

Using select I'm filtering the data. Filtering is working fine. Clear button is also fine just the UI is showing cross sign like below:

Can you help me in this issue?

Answer 1

As you are using two way binding [(ngModel)] :

<ng-select 
           (change)="setFilter('','')" 
           [items]="eventType"
           bindLabel="name"
           bindValue="id"
           placeholder="Select Event Type"
           [(ngModel)]="event_type" 
           id="eventType">
</ng-select>

In your component it is necessary to add empty value and set [(ngModel)] to your desired value in clearFilter() method:

event_type: any;

eventType = [
    {id: 'empty', name: ''},
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = this.eventType[0];
}

Answer 2

If, in example, you can set your drop-down to default 'create', you can do it like this:

eventType = [
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = 'create';
    this.setFilter('','');
}

Alternatively you can give a blank option:

eventType = [
    {id: '', name: ''},
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = '';
    this.setFilter('','');
}

Answer 3

Using the ngModel and making the variable variablename = null; will make your work easy. Thank me later