Can't bind to 'highlight' since it isn't a known property of 'code'

[alwinaugustin]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/ngx-highlightjs

Steps to reproduce:

Expected Behavior

I have the following code in the module file. I have multiple modules and so I am importing the HighlightModule, in the module in which the highlighting functionality is needed. So the following code is not in App Module.

import { HighlightModule, HIGHLIGHT_OPTIONS, HighlightOptions} from 'ngx-highlightjs';

@NgModule({
  declarations: [
    EnvironmentComponent,
    RepositoryComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    HighlightModule
  ],
  providers: [
    EnvironmentService,
    AuthService,
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript'),
          css: () => import('highlight.js/lib/languages/css'),
          xml: () => import('highlight.js/lib/languages/xml')
        }
      }
    }
  ],
})

and in the component template, I have the code like this :

<pre><code [highlight]="fileData" (highlighted)="onHighlight($event)"></code></pre>

Actual Behavior

Now it is giving the following error:

: Can't bind to 'highlight' since it isn't a known property of 'code'.

I am getting the fileData from an API call and it is inside the subscribe of the observable.

Environment

• Angular: 10
• ngx-scrollbar:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[MurhafSousli]

You can import it HighlightModule in children modules, however HIGHLIGHT_OPTIONS

{
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript'),
          css: () => import('highlight.js/lib/languages/css'),
          xml: () => import('highlight.js/lib/languages/xml')
        }
      }
    }

should only be added once and in your root module

[alwinaugustin]

Actually this issue is in a modal that I am opening on a button click. It is working for normal pages.