cssangularbootstrap-typeaheadangular-ui-typeaheadngb-typeahead

How to highlight some options of ngb-typeahead based on a condition?

https://ng-bootstrap.github.io/#/components/typeahead/examples#focus

In this demo, I have to make the dropdown options with value which starts with 'M' and 'N' to be permanently highlighted with green and rest with yellow. How to achieve this?

Solution

  • Can be done my joining lots of different CSS concept together first go down to element by using ng:deep, then add regex to parameter of attribute which contains text.

    ::ng-deep .dropdown-menu .dropdown-item  ngb-highlight[ng-reflect-result^='M'] {
  background-color: pink;
}

    I have edited a stackblitz example here.