I would like to use an Ag-Grid Header Component in a grid on my AngularJS (v1.6.8) page. I can get the component working using this answer, but it does not appear to compile AngularJS like the deprecated headerCellRenderer did.
How can I make the Header Component compile AngularJS?
See here for a basic example: https://embed.plnkr.co/mUmNL1/
You need to use $compile service for that.
getTemplate = function () {
var str = $compile('<span ng-click="alertMsg()">{{getLabel()}}</span>')($scope)[0];
return str;
};
Have a look at this plunk: ag-grid angularjs custom header component
Also, you would need to make few changes in CustomerHeader's init function as per this example: Angular 1.x and ag-Grid Components
MakeHeaderComp.prototype.init = function (params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = '=> {{params.displayName}}';
// create and compile AngularJS scope for this component
this.$scope = $scope.$new();
$compile(this.eGui)(this.$scope);
this.$scope.params = params;
// in case we are running outside of angular (ie in an ag-grid started VM turn)
// we call $apply. we put in timeout in case we are inside apply already.
setTimeout(this.$scope.$apply.bind(this.$scope), 0);
};
