B45i :
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?
Adrita Sharma :
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;
}
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=293711&siteId=1