javascriptangulartypescriptangular-ngselect

ng-select : add an extra option


How can I add an extra item to my ng-select dropdown like the Create New in the following image :

enter image description here

This is the current code I have:

<ng-select
    [multiple]="true"
    [hideSelected]="true"
    [items]="robots"
    formControlName="RobotGUID"
    bindLabel="Name"
    bindValue="GUID"
>
    <ng-template ng-label-tmp let-item="item" let-clear="clear">
        <ng-container *ngIf="item.GUID">
            <span class="ng-value-icon left" (click)="onRobotEditClick($event, item.GUID)" aria-hidden="true">
                <i class="fas fa-edit btn-focus"></i>
            </span>
            <span class="ng-value-label">{{item.Name}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </ng-container>
    </ng-template>
</ng-select>

I tried using <ng-option> but the item didn't appear in the dropdown. How can I add an extra item form the template?


Solution

  • You can use [addTag] and addTagText.

    1. [addTag] : Allows to create custom options.
    2. addTagText : Set custom text when using tagging.

    app.component.html :

    <ng-select [items]="cities" 
          bindLabel="name" 
          placeholder="Select city"      
          [(ngModel)]="selectedCity" 
          addTagText="Create New" 
          [addTag]="CreateNew">
    </ng-select>
    

    app.component.ts :

    export class AppComponent {
    
        cities = [
            {id: 1, name: 'City1'},
            {id: 2, name: 'City2'},
            {id: 3, name: 'City3'},
            {id: 4, name: 'City4'},
            {id: 5, name: 'City5'}
        ];
        
       CreateNew(city){
         alert("Create New Clicked : "+city)
       }
    }
    

    Pictures :

    1. enter image description here

    2.

    enter image description here