I'm working on a project where, I want to create a custom feature in ng-select, so that while entering the text in ng-select, it appends it to the binding item and add it as multiselect.

This is the exact implementation needed in angular 6

I'm using angular v6.0

Is there any other method for that implementation in angular 5, as shown in that mentioned plunker ??

Sorry, If there was some mistake in question. As I'm new in Angular.

Thanks in advance.

I'm working on a project where, I want to create a custom feature in ng-select, so that while entering the text in ng-select, it appends it to the binding item and add it as multiselect.

http://embed.plnkr.co/GLuyC0jpIdiEXB6R4FIa/preview

This is the exact implementation needed in angular 6

I'm using angular v6.0

Is there any other method for that implementation in angular 5, as shown in that mentioned plunker ??

Sorry, If there was some mistake in question. As I'm new in Angular.

Thanks in advance.

• javascript
• html
• angular
• typescript
• angular-ngselect

• Hi! You said you are using Angular 6, but your Plunker seems to be using AngularJS 1.4 – Oliver Ni Commented Jun 14, 2018 at 6:35
• @OliverNi this plunker is the exact Implementation I need on my angular 6 application. – Rishav Pandey Commented Jun 14, 2018 at 6:37
• Oh I see. I'll take a look – Oliver Ni Commented Jun 14, 2018 at 6:38
• Are you looking for ng-select.github.io/ng-select#/filter? – Oliver Ni Commented Jun 14, 2018 at 6:40
• Yeah, thanks in advance. Actually, I want to create a function, on every (keyup), it appends the data being written inside input element in ng-select, into a empty array of string, which can show that data and can be used as multiselect in ng-select. just as implemented in that demo plunker.. – Rishav Pandey Commented Jun 14, 2018 at 6:42

3 Answers 3

I think you can achieve this functionality by using addTag of ng-select,

here is the implementation : https://ng-select.github.io/ng-select#/tags

The only solution I found was access to ng-select children.

my html:

<ng-select [items]="places"
           bindLabel="name"
           [(ngModel)]="selected" dropdownPosition="bottom" #ngselect>
    <ng-template ng-option-tmp let-item="item" let-index="index">
        <b>{{item}}</b>
    </ng-template>
</ng-select>

ngselect - NgSelectComponent

this.myselect.element - take HTMLElement, and in children we are looking for our <input>

@ViewChild('myngselect') myselect;

myMethod() {
     const input = this.myselect.element.children[0].children[0].children[1].children[0];
}

In your html you have to set name for your input and for ng-select control set id eg. #myNgSelect

  <ng-select #myNgSelect
           [items]="places"
           [(ngModel)]="selected"
           [ngModelOptions]="{standalone: true}"
           [searchable]="false"
           bindValue="id"
           bindLabel="name"
           (open)="onOpenMyNgSelect()"
           dropdownPosition="bottom">
    <ng-template ng-header-tmp>
      <input type="text" name="myNgSelectInput"/>
    </ng-template>
  </ng-select>

In code you have to do like below and you should access to your custom input control in ng-select

 @ViewChild('myNgSelect') myNgSelect: NgSelectComponent;

 onOpenMyNgSelect() {
    setTimeout(() => { //we are waiting for open ng-select control and generate our custom input
      const elements = document.getElementsByName('myNgSelectInput')
      
      if (!isNullOrUndefined(elements) && elements.lenght > 0) {
          const inputElement = elements[0] as HTMLInputElement;

          if (!isNullOrUndefined(inputElement)) {
            // do something here
          }
      }
    }, 800);
  }