AG-Grid Angular Import 2023

 import { AgGridModule } from "ag-grid-angular";

import 'ag-grid-enterprise';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgGridModule],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

// also v28 not recommended to use @ag-grid-enterprise/all-modules

// Since v28 the AgGridModule no longer needs the .withComponents() method as all user applications will now be using Ivy. The method used to handle registering custom components as EntryComponents but that is no longer required with Ivy and was deprecated by Angular.

So to fix this error make the follow change and your custom components will still work.

- AgGridModule.withComponents([CustomComp]);
+ AgGridModule

// if imported in shared module, export AgGridModule

https://stackoverflow.com/questions/63414155/how-to-import-ag-grid-enterprise-in-my-angular-7-project

https://stackoverflow.com/questions/72881136/property-withcomponents-does-not-exist-on-type-typeof-aggridmodule

// set up enterprise licnese

main.ts

import { environment } from './environments/environment';

import { LicenseManager } from  'ag-grid-enterprise'

if (environment.agGridLicenseKey) {

  LicenseManager.setLicenseKey(environment.agGridLicenseKey);

}

enviroments/environment.ts and environment.prod.ts

agGridLicenseKey: 'XXXX'

ag-grid using filter manually on a column && create custom filtering component

 1) ag-grid using filter manually on a column :

https://github.com/ag-grid/ag-grid/issues/4870

   var countryFilterComponent = gridApi.getFilterInstance('fieldA');
          const model = countryFilterComponent.getModel();
          countryFilterComponent.setModel({
            filterType: 'text',
            type: 'contains',
            filter: value,
          });
            gridApi.onFilterChanged();

https://www.ag-grid.com/javascript-data-grid/filter-api/#example-filter-api

// Get a reference to the filter instance
const filterInstance = gridOptions.api.getFilterInstance('name'); 

// Set the filter model
filterInstance.setModel({
    filterType: 'text',
    type: 'startsWith',
    filter: 'abc',
});

// Tell grid to run filter operation again
gridOptions.api.onFilterChanged();

2) create own custom filtering component

https://www.ag-grid.com/angular-data-grid/component-filter/

import { IFilterAngularComp } from '@ag-grid-community/angular';
import {
  IAfterGuiAttachedParams,
  IDoesFilterPassParams,
  IFilterParams,
} from '@ag-grid-community/core';
import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'filter-cell',
  template: `
    <div class="container">
      Partial Match Filter:
      <input
        #input
        (ngModelChange)="onChange($event)"
        [ngModel]="text"
        class="form-control"
      />
    </div>
  `,
  styles: [
    `
      .container {
        border: 2px solid #22ff22;
        border-radius: 5px;
        background-color: #bbffbb;
        width: 200px;
        height: 50px;
      }

      input {
        height: 20px;
      }
    `,
  ],
})
export class PartialMatchFilter implements IFilterAngularComp {
  private params!: IFilterParams;
  public text = '';

  @ViewChild('input', { read: ViewContainerRef })
  public input!: ViewContainerRef;

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

  isFilterActive(): boolean {
    return this.text != null && this.text !== '';
  }

  doesFilterPass(params: IDoesFilterPassParams): boolean {
    const {
      api,
      colDef,
      column,
      columnApi,
      context,
      valueGetter,
    } = this.params;
    const { node } = params;
    const value = valueGetter({
      api,
      colDef,
      column,
      columnApi,
      context,
      data: node.data,
      getValue: (field) => node.data[field],
      node,
    })
      .toString()
      .toLowerCase();

    return this.text
      .toLowerCase()
      .split(' ')
      .every((filterWord) => value.indexOf(filterWord) >= 0);
  }

  getModel(): any {
    if (!this.isFilterActive()) {
      return null;
    }

    return { value: this.text };
  }

  setModel(model: any): void {
    this.text = model ? model.value : '';
  }

  afterGuiAttached(params: IAfterGuiAttachedParams): void {
    window.setTimeout(() => this.input.element.nativeElement.focus());
  }

  componentMethod(message: string): void {
    alert(`Alert from PartialMatchFilterComponent: ${message}`);
  }

  onChange(newValue: any): void {
    if (this.text !== newValue) {
      this.text = newValue;
      this.params.filterChangedCallback();
    }
  }
}