Cannot change overlayNoRowsTemplate after grid loaded

Question

There are two different situations where there are no rows to display. And I want to change the template each time depending on the situation. I am updating the overlayNoRowsTemplate but the template cannot replaced after the grid has been loaded. Refreshing the grid doesn't refresh the overlayNoRowsTemplate.

Answer 1

You can handle it dynamically only via own Overlay Component, cuz overlayNoRowsTemplate same as other gridOptions doesn't support dynamic changes.

import { Component } from '@angular/core';
import { INoRowsOverlayAngularComp } from "ag-grid-angular";

@Component({
    selector: 'app-no-rows-overlay',
    template: `<div class="ag-overlay-loading-center" style="background-color: lightcoral; height: 9%">` +
          `   <i class="fa fa-frown-o"> {{this.params.noRowsMessageFunc()}} </i>` +
          `</div>`
})
export class CustomNoRowsOverlay implements INoRowsOverlayAngularComp {
    private params: any;

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

As you can see it's not hard to set up and also, you will be able to access all related things via params.api and gridOptions.noRowsOverlayComponentParams.

Check docs for more info.