ag-grid custom loader as directive

Question

I am using ag-grid-angular in my project. I am using more than 20 times ag-grid-angular in different pages of my App. Here i am using custom loader before loading the data. I need to use the custom loader as directive so i can re use in all my ag-grid-angular. But right now i can only able to declare loading template in each component.

<ag-grid-angular
    style="width:100%;height:300px;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    [overlayLoadingTemplate]="loadingTemplate"
    [overlayNoRowsTemplate]="overlayNoRowsTemplate"
    (gridReady)="onGridReady($event)"
    [columnDefs]="columnDefs">

and in component.ts

this.loadingTemplate = "<b>Example Loader</b>"

Please provide suggestion for one code use anywhere.

Thanks!

Answer 1

Yes, it's possible with a directive which can inject grid component in constructor:

ag-grid-loading.directive.ts

import { Directive } from "@angular/core";
import { AgGridNg2 } from "ag-grid-angular";

@Directive({
  selector: "ag-grid-angular"
})
export class AgGridLoadingDirective {
  constructor(private grid: AgGridNg2) {
    grid.overlayLoadingTemplate = "<b>Example Loader</b>";
  }
}

Make sure, that this directive is visible accross all your NgModules.

Now, you can remove overlayLoadingTemplate binding from all your grids.

Stackblitz Example