What is the alternative of [clearable] in ng-select

Question

I do not want to use the [clearable] in ng-select for leakage of my space. Instead of [clearable] I want to use only [clearOnBackspace] but when I write [clearable] = "false" and [clearOnBackspace] = "true" it does not work.

enter code here

    <ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="false"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">
    </ng-select>

if 'clearable' property is set to false, and clearOnBackspace is set to true, user can remove single item using backspace button. if (this.filterValue || (!multiple && !this.clearable) || !this.clearOnBackspace || !this.hasValue) { template example: (add)=... (remove)=... [multiple]="true" [clearable]="false" [clearOnBackspace]="true" you can hide clear button simply by css — Mebin Joe, Feb 04 '19 at 05:24
use `[clearable]="true"` it will be cleared on backspace only — Just code, Feb 04 '19 at 05:36
The user selects only a single value. So [multiple]="true" not needed. Yap I can remove the cross button using CSS but I want to handle it by JavaScript. — Sabbir, Feb 04 '19 at 05:36
@Just Code if i make [clearable]="true" it also shows the cross icon. I do not allow it for my space lackage. — Sabbir, Feb 04 '19 at 05:39

score 2 · Accepted Answer · answered Feb 04 '19 at 05:52

If you do [clearable]="false" it will disallow to clear the selection.

you can use css to hide the close icon. like this

.ng-clear-wrapper{
  display: none;
}

and keep ng-select as it is

Demo

<ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="true"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">

infact you do not need [clearOnBackspace] = "true"

What is the alternative of [clearable] in ng-select

1 Answers1