A custom Angular (v12) component to mimic the Ag-Grid's (v27.0.0) regular, standard column header. This serves as a basis for a custom header development

ag-standard-header.component.ts

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

@Component({
	selector: 'ag-standard-header',
	template: `
	<div class="ag-cell-label-container" role="presentation" [ngClass]="{'ag-header-cell-sorted-asc': params.column.isSortAscending(), 'ag-header-cell-sorted-desc': params.column.isSortDescending(), 'ag-header-cell-sorted-none': params.column.isSortNone()}">
		<span *ngIf="params.enableMenu" #menuButton ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true" (click)="onMenuClicked()">
			<span class="ag-icon ag-icon-menu" unselectable="on" role="presentation"></span>
		</span>
		<div ref="eLabel" class="ag-header-cell-label" role="presentation" (click)="progressSort($event)">
			<span ref="eText" class="ag-header-cell-text">{{ params.displayName }}</span>
			<span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true" [ngClass]="{'ag-hidden': !params.column.isFilterActive()}">
				<span class="ag-icon ag-icon-filter" unselectable="on" role="presentation"></span>
			</span>
			<span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true" [ngClass]="{'ag-hidden': !params.column.isSorting() || !isMultiSort()}">{{params.column.getSortIndex() + 1}}</span>
			<span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true" [ngClass]="{'ag-hidden': !params.column.isSortAscending()}">
				<span class="ag-icon ag-icon-asc" unselectable="on" role="presentation"></span>
			</span>
			<span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true" [ngClass]="{'ag-hidden': !params.column.isSortDescending()}">
				<span class="ag-icon ag-icon-desc" unselectable="on" role="presentation"></span>
			</span>
			<span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true" [ngClass]="{'ag-hidden': !params.column.isSorting() || !params.column.isSortNone()}">
				<span class="ag-icon ag-icon-none" unselectable="on" role="presentation"></span>
			</span>
		</div>
	</div>
	`,
	styles: [
		`:host {
			width: 100%;
		}`
	],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class AgStandardHeader implements IHeaderAngularComp, OnDestroy {
	public params!: IHeaderParams;

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

	constructor(private cdr: ChangeDetectorRef) { }
	
	private markForCheckFctRef = this.markForCheck.bind(this);

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

		this.params.column.addEventListener('filterChanged', this.markForCheckFctRef);
		this.params.column.addEventListener('sortChanged', this.markForCheckFctRef); 
		this.params.api.addEventListener('sortChanged', this.markForCheckFctRef); 
	}

	ngOnDestroy(): void {
		this.params.column.removeEventListener('filterChanged', this.markForCheckFctRef);
		this.params.column.removeEventListener('sortChanged', this.markForCheckFctRef);
		this.params.api.removeEventListener('sortChanged', this.markForCheckFctRef);
	}

	refresh(params: IHeaderParams) {
		return false;
	}

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

	progressSort(event: any) {
		this.params.progressSort(event.shiftKey);
	}

	isMultiSort(): boolean {
		const allStates = this.params.columnApi.getColumnState();
		for (let state in allStates) {
			if (allStates[state].sortIndex) {
				return true;
			}
		}
		return false;
	}

	private markForCheck() {
		this.cdr.markForCheck();
	}
}