简体   繁体   中英

How to highlight the option selected in <ng-select> and <ng-option> tag in angular 5

I have 2 tags, when I click on the drop panel it gives various options to select, by default one value is selected but when I open the drop panel it is not highlighting the previously selected option.

I tried adding [selected]="filters" or [ng-selected]="filters" in <ng-option> tag, but it is giving me error that it is not a known property of <ng-option>

How can I highlight this option selected in the drop panel?

<ng-select [(ngModel)]="filterSelected" name="in" id="fileterName" 
       (open)=droppanel() >
    <ng-option *ngFor="let opt of filterJSONData" [value]="opt.val" >
          {{ opt.content }}
    </ng-option>
</ng-select>

Thanks in advance.

The definition of the select should be like this:

<ng-select
  [items]="filterJSONData"
  bindLabel="{{content}}" bindValue="{{val}}"
  [(ngModel)]="filterSelected">
  <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
    <div [ngOptionHighlight]="search">{{ item.content }}</div>
  </ng-template>
</ng-select>

When you type a text in the select, the matches values are displayed underline.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM