Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  




           

Customize selected item in ng-select
To Customize selected item in ng-select, for example to add a tooltip, add an ng-template for the label item, the option item, or both:

<ng-select #select
name="selOptionsMultiFilter"
appendTo="#mainContainer"
[items]="options"
[multiple]="true"
bindValue="Value"
bindLabel="DisplayName"
[clearable]="false"
[(ngModel)]="values">
<!-- these are optional but allow setting title-->
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<div class="ng-value" [title]="item.DisplayName">
<span (click)="clear(item)" class="ng-value-icon left" aria-hidden="true">x</span>
<span class="ng-value-label">{{item.DisplayName}}</span>
</div>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<div [title]="item.DisplayName">{{item.DisplayName}}</div>
</ng-template>
</ng-select>

Created By: amos 2/6/2020 3:04:53 PM
Updated: 2/7/2020 10:03:07 AM

 Comments:
 > Guest 5/12/2020 1:01:08 AM
I faced problem on displaying the tooltip, can please help?

<ng-select [items]="users"
bindLabel="name"
[searchFn]="customSearchFn"
[(ngModel)]="selectedUser1">
<ng-template ng-label-tmp let-item="item">
<div class="ng-value" [title]="item.gender">
<span [title]="item.gender" class="ng-value-label">{{item.name}}</span>
</div>
</ng-template>
<ng-template ng-option-tmp let-item="item">
{{item.name}} <br/>
<small>{{item.gender}}</small>
</ng-template>
</ng-select>