How to highlight the option selected in and tag in angular 5

Question

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.

how many times you searched it?? https://stackoverflow.com/questions/37968712/angular-2-setting-selected-value-on-dropdown-list check it out.probably your answer is there. — rykamol, Oct 01 '18 at 06:46
did you try the `[ngOptionHighlight]` directive that is provided with the plugin? https://github.com/ng-select/ng-select#other — Claies, Oct 01 '18 at 07:34

score 5 · Answer 1 · answered Oct 02 '18 at 07:28

5

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.

answered Oct 02 '18 at 07:28

Yahima Duarte

59
1

It's been split into a different package: https://www.npmjs.com/package/@ng-select/ng-option-highlight – Christoff Erasmus Feb 01 '23 at 13:38

How to highlight the option selected in and tag in angular 5

1 Answers1