Error with Angular ag-grid: "Could not find component class XXX, did you forget to configure this component"

Issue

I am getting this error from Chrome when running an ag-grid application. Basically, I have following

export class CustomHeader implements IHeaderAngularComp {
  private params: any;


  @ViewChild('menuButton', { read: ElementRef }) public menuButton;

  agInit(params): void {
    this.params = params;
  }

  onMenuClicked() {
    this.params.showColumnMenu(this.menuButton.nativeElement);
  }

  refresh(params: IHeaderParams): boolean {
    return true;
  }
}

...

ColumnDefs = {
    ...
     {
        field: "A column", editable: false, sortable: false, width: 90,
        type: 'stringColumn', centered: true, pinned: 'left',
        headerComponent: CustomHeader,
        headerComponentParams: {
          template: `
            <div ref="eLabel" class="lmn-form-group">
              <input ref="eCheck" type="checkbox">
              <span>Use This</span>
            </div>
          `
        }
     },
    ...
}

The Chrome says it does not recognize this CustomHeader:

Could not find component class CustomHeader { agInit(params) { this.params = params; } onMenuClicked() { this.params.showColumnMenu(this.menuButton.nativeElement); } refresh(params) { return true; } }, did you forget to configure this component?"

Is there anything I am missing?

Solution

Have you seen the example in the documentation?

Note that you also need to provide the [frameworkComponents] grid property so that the grid knows to use the header component:

 this.frameworkComponents = { agColumnHeader: CustomHeader };

Answered By - Shuheb