How to Make Ng-Select Remove-And-Read-Only

How to make ng-select remove-and-read-only

In order to achieve this, we first need to create 3 css classes.

One to disable the arrow-down icon:

.ng-select.disable-arrow .ng-arrow-wrapper .ng-arrow {
  display: none;
}

One to disable the search/list dropdown:

.ng-select.disable-dropdown ng-dropdown-panel {
  display: none;
}

One to disable the clear-all X icon:

.ng-select.disable-clear-all .ng-clear-wrapper {
  display: none;
}

Then we add the ng-select element using the 3 css classes that we created, plus a few options:

<ng-select
  class="disable-arrow disable-dropdown disable-clear-all"
  [searchable]="false"
  [clearable]="true"
  [multiple]="true"
>
</ng-select>

disable angular ng-select window

As stated in other responses you can use the option

[disabled]="booleanValue"

However you will need a formControlName value set as well as described here.

You would get:

<!-- test-component.html -->
<ng-select [disabled]="myDisabledCondition" formControlName="myFormControl" 
...>
</ng-select>

How to clear ng-select selection

Here is solution from comment:

  // Access ng-select
  @ViewChild(NgSelectComponent) ngSelectComponent: NgSelectComponent;

  // Call to clear
  this.ngSelectComponent.handleClearClick();

Note that handleClearClick isn't exposed in docs as public api method however as Tim mentioned it's public method so it's possible to call it.

How to remove 'clear all' button with CSS (ng-select field)

In your stylesheet add display: none; to the .ng-clear-wrapper selector.

Like so:

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

How to remove search box in ng-select

You can use searchable and clearable

 <ng-select [(ngModel)]="model" [searchable]="false" [clearable]="false" (change)="onChange($event)">
        <section *ngFor="let i of list;">
            <ng-option value="{{i.id}}">
                  {{ i.name }}
            </ng-option>
        </section>
    </ng-select>

How to make select dropdown readonly or disabled conditionally in angular?

You should use disabled instead of attr.disabled

<select [disabled]="!editable">
...
</select>

Angular 2+: How to make drop down menu readonly (or disable) with default value and add form validation error if no default value

I found work around to get validation in place.
https://stackblitz.com/edit/angular-zbibqx

---

Related Topics