Get the custom header cell renderer instance in ag grid angular

Question

For my ag grid angular, I have set a particular column header to a custom header using a CustomHeaderRenderer component. It is a header that has HTML input in it. I need to undo the changes happened to the input inside the custom header during a particular situation that happens inside the main component where we have the ag grid. But I am not able to get the instance of the header renderer component to access its methods or properties to make changes there in the renderer.

Answer 1

First create your custom header component

import {Component, ElementRef, ViewChild} from '@angular/core';
import {IHeaderAngularComp} from 'ag-grid-angular'
import {IHeaderParams} from 'ag-grid-community'

@Component({
    selector: 'app-custom-header',
    template: `
      <div>
          <div *ngIf="params.enableMenu" #menuButton class="customHeaderMenuButton" (click)="onMenuClicked($event)">
              <i class="fa {{params.menuIcon}}"></i>
          </div>
          <div class="customHeaderLabel">{{ params.displayName }}</div>
          <div *ngIf="params.enableSorting" (click)="onSortRequested('asc', $event)" [ngClass]="ascSort"
              class="customSortDownLabel">
              <i class="fa fa-long-arrow-alt-down"></i>
          </div>
          <div *ngIf="params.enableSorting" (click)="onSortRequested('desc', $event)" [ngClass]="descSort"
              class="customSortUpLabel">
              <i class="fa fa-long-arrow-alt-up"></i>
          </div>
          <div *ngIf="params.enableSorting" (click)="onSortRequested('', $event)" [ngClass]="noSort"
              class="customSortRemoveLabel">
              <i class="fa fa-times"></i>
          </div>
      </div>
    `,
    styles: [
        `
            .customHeaderMenuButton,
            .customHeaderLabel,
            .customSortDownLabel,
            .customSortUpLabel,
            .customSortRemoveLabel {
                float: left;
                margin: 0 0 0 3px;
            }

            .customSortUpLabel {
                margin: 0;
            }

            .customSortRemoveLabel {
                font-size: 11px;
            }

            .active {
                color: cornflowerblue;
            }
        `
    ]
})
export class CustomHeader implements IHeaderAngularComp {
    public params: IHeaderParams;

    public ascSort: string;
    public descSort: string;
    public noSort: string;

    @ViewChild('menuButton', {read: ElementRef}) public menuButton;

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

        params.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
        
        this.onSortChanged();
    }

    onMenuClicked() {
        this.params.showColumnMenu(this.menuButton.nativeElement);
    };

    onSortChanged() {
        this.ascSort = this.descSort = this.noSort = 'inactive';
        if (this.params.column.isSortAscending()) {
            this.ascSort = 'active';
        } else if (this.params.column.isSortDescending()) {
            this.descSort = 'active';
        } else {
            this.noSort = 'active';
        }
    }

    onSortRequested(order: string, event: any) {
        this.params.setSort(order, event.shiftKey);
    }
}

then add it to your ag-grid-angular as components input

public components: {
[p: string]: any;

} = { agColumnHeader: CustomHeader, };