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