hide selection in ng-select

Question

We are using ng-select in a project. And i need to provide functionality with dropdown, but my goal is to clear selection box after choose item from drop-down list. Anyone face this problem?

 <ng-select 
   #addmanager
   (change)="setLeagueAdmin($event)" 
   [items]="notAdminLeagueMembers"
   bindLabel="title"
   placeholder="Select from list"
   [clearSearchOnAdd]="true"
   [virtualScroll]="true"
   [clearable]="true"
   (scrollToEnd)="onAddManagerSscrollEnd()">
 </ng-select>

Answer 1

You can use ViewChild to get the first element or the directive matching the selector from the view DOM. If the view DOM changes, and a new child matches the selector, the property will be updated.

 <ng-select 
   #addmanager
   (change)="setLeagueAdmin($event)" 
   [items]="notAdminLeagueMembers"
   bindLabel="title"
   placeholder="Select from list"
   [clearSearchOnAdd]="true"
   [virtualScroll]="true"
   [clearable]="true"
   (scrollToEnd)="onAddManagerSscrollEnd()">
 </ng-select>

component.ts

@ViewChild('addmanager') ref:ElementRef;
onChange($e){
  console.log($e);
 //set the input element clear 
  this.ref.itemsList['_selected']=[];
}

Check the example here: https://stackblitz.com/edit/ng-select-q46vpr