Injecting 3rd party component inside angular attribute directive in angular library

Question

Error: NullInjectorError: No provider for ColumnComponent!

I created an angular library, then inside the library I created an attribute directive which is used by main app to bind data to the 3rd party component's properties.

src/app/client.component.html

<kendo-grid-column field="id" fcidColumnBinding>
</kendo-grid-column>

here what I have in library side: projects/metadata-lib/src/lib/column-binding-directive.ts

@Directive({
  selector: '[fcidColumnBinding]'
})
export class ColumnBindingDirective {

  constructor(private metadataLibService: MetadataLibService, private gridColumn: ColumnComponent) { }
  public ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this.metadataLibService.subscribe((result) => {
      this.gridColumn.title = this.metadataLibService.getUIHint(result, this.gridColumn.field, 'DisplayName');
      this.gridColumn.width = this.metadataLibService.getUIHint(result, this.gridColumn.field, 'columnWidth');
    })
    this.rebind();
  }
  public rebind(): void {
    this.metadataLibService.query();
  }
}

project/src/lib/metadata-lib.module.ts

import { NgModule } from '@angular/core';
import { MetadataLibComponent } from './metadata-lib.component';
import { MetadataBinidingDirective } from './metadata-biniding.directive';
import { ColumnBindingDirective } from './column-binding.directive';
import { CommonModule } from '@angular/common';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { ColumnHeaderControlComponent } from './column-header-control/column-header-control.component';
import { ForeignkeyFieldControlComponent } from './foreignkey-field-control/foreignkey-field-control.component';
import { IconFieldControlComponent } from './icon-field-control/icon-field-control.component';
import { ImageFieldControlComponent } from './image-field-control/image-field-control.component';
import { CheckboxFilterControlComponent } from './checkbox-filter-control/checkbox-filter-control.component';
import { DropdownFilterControlComponent } from './dropdown-filter-control/dropdown-filter-control.component';
import { SwitchFilterControlComponent } from './switch-filter-control/switch-filter-control.component';

@NgModule({
  imports: [
    CommonModule,
    DropDownsModule,
    GridModule,
    ButtonsModule,
    InputsModule
  ],
  declarations: [
    MetadataLibComponent,
    MetadataBinidingDirective,
    ColumnBindingDirective,
    ColumnHeaderControlComponent,
    ForeignkeyFieldControlComponent,
    IconFieldControlComponent,
    ImageFieldControlComponent,
    CheckboxFilterControlComponent,
    DropdownFilterControlComponent,
    SwitchFilterControlComponent,
    ],
  exports: [
    MetadataLibComponent,
    MetadataBinidingDirective,
    ColumnBindingDirective,
    ColumnHeaderControlComponent,
    ForeignkeyFieldControlComponent,
    IconFieldControlComponent,
    ImageFieldControlComponent,
    CheckboxFilterControlComponent,
    DropdownFilterControlComponent,
    SwitchFilterControlComponent,
  ]
})
export class MetadataLibModule { }

I wonder can we use 3rd party component inside the angular library directives or not?

Answer 1

Finally I figured, yes we can. it took me forever to configure it right.

SO the Answer is yes. HOW?

library module.ts is very critical you need to import the 3rd party modules inside the import:[] and when ever you use it you shouldn't trust visual studio code suggestion path. you need to set it up manually what broke my code was this

import { ColumnComponent } from '@progress/kendo-angular-grid';

which was

import { ColumnComponent } from '@progress/kendo-angular-excel-export';

so to summarize: 1, yes we can use 3rd party, also we can have bindingDirectives AKA attribute directives inside the angular library. I am not sure about pipes yet. I couldn't solve the issue with pipes inside the angular library. 2. do not trust the suggestion path of your IDE while you are developing angular library,