angularjs directive in ag-grid's IHeaderComponent? - ag-grid

Question

Is there a way to add your own directive to the existing ag-grid's IHeaderComponent and modify the header content/behavior?
I created my own IHeaderComponent and used it in the ag-grid, but facing difficulty adding my own directive in the header. All the TS example on their site doesn't help much either, since I'm stuck with angular 1.6. In addition, what is the correct way to pass my dependencies to my IHeaderComponent since I cannot use IHeaderAngularComponent.
Any suggestions?
Edit:
My first stab of it, kind a ugly how I pass my dependencies, not sure if that is the proper way to do it.
class MyHeader {
/**
* #implements {IHeaderComp}
*/
constructor() {
if (!MyHeader.injector) {
MyHeader.injector = angular.element('[ng-app=myApp]').injector();
}
this.injector = MyHeader.injector;
this.dependencies = ['$log'];
}
/**
* #param {IHeaderCompParams} params
*/
init(params) {
this.params = params;
this.eGui = document.createElement('div');
this.eGui.innerHTML = '<span class="ag-header-cell-text" ref="eText" role="columnheader"></span>';
this.eText = this.eGui.querySelector(".ag-header-cell-text");
this.eText.textContent = params.displayName;
this.initAngular();
}
initAngular() {
this.dependencies = _.compact(this.dependencies);
this.dependencies.forEach(dep => this[dep] = this.injector.get(dep));
}
getGui() {
return this.eGui;
}
destroy() {
if (this.params.enableSorting) {
this.eGui.removeEventListener('click', this.sortRequestListener);
this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
}
}
onSortRequested(event) {
if (this.params.enableSorting) {
//...
}
}
onSortChanged() {
if (this.params.enableSorting) {
//...
}
}
initSorting() {
if (this.params.enableSorting) {
//...
}
}
}

Answer 1

Have you checked an official demo for custom headerComponent?
According to your code, to handle click, hover or any other event you need to define a listener. You are handling dispose with removeEventListener, which is good, but where is a subscription?
So as example, you need to append on init step:
let youHeader = this.eGui.querySelector(".ag-header-cell-text");
youHeader.addEventListener('click', this.youCustomClickHandler);
youCustomClickHandler(){
... your logic here
}
You can specify your enable\disable condition on init step (not exactly inside the function)