ng-select : add an extra option

Question

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

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?

You can add a new item in `robots` named as : `Create New` and listen for onchange or selected event to listen to that option — Prashant Pimpale, Mar 16 '20 at 05:24

score 13 · Accepted Answer · answered Jan 27 '21 at 09:30

You can use [addTag] and addTagText.

[addTag] : Allows to create custom options.
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.

2.

In case this helps anyone that stumbles across this... when using the ng-select `multiple="true"`, I found I needed to return a value representing the new item from the `CreateNew` function for it to get added as a selected option — Ian A, Feb 25 '21 at 10:37

Adrita Sharma · Answer 2 · 2020-03-16T06:57:07.447

9

You can use ng-footer-tmp to add additional items in the select box.

Try like this:

.html

<ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity">
      <ng-template ng-footer-tmp>
               <p class="create-new" (click)="CreateNew()">Create New </p>
      </ng-template>
</ng-select>

.style.css

.create-new {
   cursor: pointer;
   padding-top:5px;
   padding-bottom:10px
}
.ng-dropdown-footer{
    border-top:unset !important;
    padding: 0px 10px !important;
}
.ng-dropdown-footer:hover {
   background-color: #f5faff;
}

Working Demo

edited Mar 16 '20 at 06:57

answered Mar 16 '20 at 06:10

Adrita Sharma

21,581
10
69
79

Thanks for the explanation but how it can behave as normal dropdown option? After selection it is not auto-closing nor displaying as selected – app Dec 11 '20 at 18:57

ng-select : add an extra option

2 Answers2