如何在 angular 6 中的 Ng-select 下用黄色突出显示选项

Question

在我的项目中我实现了 Ng-select 但我想在搜索选项时突出显示该选项特别突出显示。

我找到了一些技巧，但这不能满足我的问题，你可以检查一下here

这是我的代码

HTML

<ng-select [items]="HSNCodeArray" bindLabel="name" bindValue="name" [clearable]="false" placeholder="Select HSN Code">
    <ng-template ng-label-tmp let-city="item">
                <span class="text-uppercase">{{ city.name }}</span>
            </ng-template>
  <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
     <div [ngOptionHighlight]="search" class="text-uppercase">{{ item.name }}</div>
  </ng-template>
</ng-select>

TS

this.HSNCodeArray = [
      { 
        name: 'maulik',
      },
      {
        name: 'Mehul',
      },
      {
        name: 'Smoking',  
      }
    ];
  }

我的期望是：当我搜索与黄色或橙色下拉选项相关的内容时，我想突出显示选项。

感谢您的帮助

Answer 1

您必须在 styles.css

下的项目文件中覆盖 CSS

在 style.css

下覆盖此 CSS

CSS

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted {
    background-color: orange !important;
    font-weight: bold !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

你可以查看我的 stackblitz Here

如何在 angular 6 中的 Ng-select 下用黄色突出显示选项

How to Highlight option with Yellow color under Ng-select in angular 6

typescript

angular-ngselect

angular