Can't bind to 'ngOptionHighlight' since it isn't a known property of <element>

[rmcsharry]

On Angular 8, ng-select throws this error using the [ngOptionHighlight] directive.

It was already reported and closed here.

However, when I add that library, my app cannot compile:

ERROR in node_modules/@ng-select/ng-option-highlight/lib/ng-option-highlight.directive.d.ts(13,17): 

error TS1086: An accessor cannot be declared in an ambient context.

Looking through the changelog history, I see this readme change:

v3.0.3...v3.0.4

I am using ng-select 3.7.3 with Angular 8. So it would appear that this is a breaking change, but it's not listed as such in the changelog.

It seems that to use the new separate package, one has to be on Angular 9. I cannot upgrade yet due to other dependencies.

I tried to downgraded to v3.0.3, and 3.0.2 and 3.0.1, and 3.0.0 but still get the error:

rror: Template parse errors:
Can't bind to 'ngOptionHighlight' since it isn't a known property of

I can see in the commits for v3.0.0 that the new package was added:

chore: use angular cli, update demo to angular 8 …
d684976
@varnastadeus
feat: update ng-select to support angular v8 …
2e4d329
@varnastadeus
chore(tests): ignore coverage from irrelevant files
972af9a
@varnastadeus
feat: expose blur method …
643cf52
@varnastadeus
chore: remove [excludeGroupsFromDefaultSelection] …
4fef383

Commits on Jul 06, 2019
@varnastadeus
chore: move [ngOptionHighlight] to a separate package …
c09dde8

So it seems I need to use this separate package for Angular 8, yet it doesn't let me compile my app?

output of ng version:

Angular CLI: 8.3.29
Node: 10.16.2
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.29
@angular-devkit/build-angular     0.803.24
@angular-devkit/build-optimizer   0.803.24
@angular-devkit/build-webpack     0.803.24
@angular-devkit/core              8.3.29
@angular-devkit/schematics        8.3.29
@angular/cli                      8.3.29
@ngtools/webpack                  8.3.24
@schematics/angular               8.3.29
@schematics/update                0.803.29
rxjs                              6.6.3
typescript                        3.5.3
webpack                           4.39.2

[rmcsharry]

So I tried downgrading to the start of when you split the pacakge:

package.json

    "@ng-select/ng-option-highlight": "0.0.1",
    "@ng-select/ng-select": "^3.0.0",

My app builds.
Both modules are imported in my AppModule.

But when I try to use the directive it crashes the app:

Error: Template parse errors:
Can't bind to 'ngOptionHighlight' since it isn't a known property of

Does nobody use the highlight?

Surely I cannot be the only person on Angular 8 where this happens. The only google hit takes me to the original closed issue which says to use the separate package, which appears to not work.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions 🎆

[parth-007]

@rmcsharry
I faced this issue just recently. I am using "@ng-select/ng-select": "^8.1.1".
Got the same error initially. But I was importing the NgOptionHighlightModule at wrong place.

Import this module where your component is declared. Like if your component is declared in create.module.ts file then import NgOptionHighlightModule at the same module.

It will work.
Thanks.

[rmcsharry]

@parth-007 thanks, good to know that, but I skipped the problem by moving everything to Angular 10