Listen to header changes in ag-grid

Question

I used this example as a reference to create custom header https://stackblitz.com/edit/clabnet-ag-grid-rich.

This is how I modified it:

I have a button which opens modal popup to edit header of the column. It works fine, however after refresh the title is back to what it was before because I don't know how to make make my ag-grid listen to these changes.

This is my custom header:

import { Component, ElementRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
import { IHeaderParams } from 'ag-grid';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { ModalComponent } from '../modal/modal.component';

interface MyParams extends IHeaderParams {
    menuIcon: string;
}

@Component({
    selector: 'app-column-header',
    templateUrl: './column-header.component.html'
})
export class ColumnHeaderComponent implements OnDestroy, IHeaderAngularComp {
// .... //

    // #region [Column editor]
    @ViewChild('columnEditor')
    columnEditor: ModalComponent;

    edit() {
        this.columnTitle = this.params.displayName;
        this.columnEditor.show();
    }

    saveRow() {
        this.columnEditor.close();
        this.params.displayName = this.columnTitle;
    }

    // #endRegion
}

<div style="display: flex; align-items: center;">
    <div style="display: inline-flex;margin-left: 10px; width: 80%" (click)="onSortRequested(sortType, $event)">
        <div class="customHeaderLabel">{{params.displayName}}</div>

        <div [hidden]="!params.enableMenu" class="customHeaderMenuButton" (click)="edit()">
            <span title="Edit">
                Edit
            </span>
        </div>
    </div>
</div>

<!-- Column title editor -->
<app-modal #columnEditor class="form" [width]="600" [hideOnBlur]="false" #modal>
    <div header>
        Edit
    </div>

    <div body>
        <div class="form-column">
            <div class="form-row">
                <label>
                   Title
                </label>
                <input type="text" [(ngModel)]="columnTitle" placeholder="title">
            </div>

        </div>
    </div>

    <div footer>
        <button class="btn btn-a" (click)="saveRow()">Save</button>
        <button class="btn btn-a" (click)="columnEditor.close()">Cancel</button>
    </div>
</app-modal>

and here is my ag-grid:

    initializeColumnDefs() {
        this.columnDefs = [
            {
                headerName: '',
                width: 50,
                field: `${0}`,
                suppressFilter: true,
                lockPosition: true, // always show row column first
                cellRenderer: (params) => {
                    return params.data.rowHeader ? params.data.rowHeader : '';
                },
                valueGetter: (params: any) => {
                    return params.data.rowHeader ? params.data.rowHeader : '';
                },
            }];

        for (let i = 0; i < this.columns; i++) {
            let header = '';
            if (this.columnHeaders && this.columnHeaders.length > 0) {
                header = this.columnHeaders[i].header;
            }
            this.columnDefs.push({
                colId: 'name',
                field: 'name',
                headerName: header,
                filter: 'agNumberColumnFilter',
                menuTabs: ['filterMenuTab'],

            }
            );
        }

        this.frameworkComponents = {
            headerComponent: ColumnHeaderComponent,
        };

<ag-grid #grid class="ag-fresh" style="width: 100%; height: 100%;"
 [enableColResize]="enableColResize" [height]="height"
    [frameworkComponents]="frameworkComponents" [domLayout]="domLayout" [enableFilter]="true" [localeText]="localeText"
    [columnDefs]="columnDefs" [autoSizeColumns]="autoSizeColumns" (cellDoubleClicked)="cellDoubleClicked($event)"
    [enableSorting]="enableSorting" [rowSelection]="rowSelection" (selectionChanged)="selectionChanged()"
    [rowData]="model">
</ag-grid>

How do I send the changes from my custom header to the table?

Answer 1

I didn't get an answer but found a solution myself, so in case anyone ever needs that here's the solution I found:

First, add headerValueGetter to you columnDefs:

        for (let i = 0; i < this.columns; i++) {
            let header = '';
            if (this.columnHeaders && this.columnHeaders.length > 0) {
                header = this.columnHeaders[i].header;
            }
            this.columnDefs.push({
                colId: i + 1,
                field: `${i + 1}`,
                headerName: header,
                filter: 'agNumberColumnFilter',
                menuTabs: ['filterMenuTab'],
                headerValueGetter: (params: any) => {
                    const headerTitle = this.columnHeaders[params.colDef.colId - 1].header; debugger;
                    if (headerTitle != params.colDef.headerName) {
                        this.columnHeaders[params.colDef.colId - 1].header = params.colDef.headerName;
                        //update in database
                        this.updateChanges();
                    }
                    return params.colDef.headerName;
                },

            }
            );
        }

        this.frameworkComponents = {
            headerComponent: ColumnHeaderComponent,
        };

in your custom header component trigger the change event. This way you can go to headerValueGetter and check if your headerName changed.

    saveHeader() {
        this.columnEditor.close();
        this.params.column.getColDef().headerName = this.columnTitle;

        // reset state to trigger headerValueGetter
        const state = this.params.columnApi.getColumnState();
        this.params.columnApi.setColumnState(state);
    }