dropDown HTML inside ag-grid column Headers using angual4

Question

How can I embed a drop down for column header in the ag-Grid using Angular?

If I have an employee grid with a a "type" column. The employee type has two options: permanent and contract. I need a dropdown for this in the column header.

Answer 1

You need to implement custom filter component for that.

Take a look at this live example: Plunk ag-grid custom filter component

Check EmployeeType column in the Plunk.

1. Implement IFilterAngularComp
2. Implement required methods for this. i.e. getModel, setModel, doesFilterPass, isFilterActive, etc
3. Provide this component as filter component for the column definition.

Below is the code for the filter component

@Component({
    selector: 'filter-cell',
    template: `
        <div class="container">
            EmployeeType Filter: 
            <select (ngModelChange)="onChange($event)" [ngModel]="type" class="form-control">
              <option value=""></option>
              <option value="Permanent">Permanent</option>
              <option value="Contractor">Contractor</option>
            </select>
        </div>`
    , styles: [.....]
})
export class RecordTypeFilter implements IFilterAngularComp {
    private params: IFilterParams;
    private valueGetter: (rowNode: RowNode) => any;

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

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

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

    doesFilterPass(params: IDoesFilterPassParams): boolean {
        return this.type.toLowerCase()
            .split(" ")
            .every((filterWord) => {
                return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
            });
    }

    getModel(): any {
        return {value: this.text};
    }

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

    ngAfterViewInit(params: IAfterGuiAttachedParams): void {
        setTimeout(() => {
            //this.select.element.nativeElement.focus();
        })
    }

    // noinspection JSMethodCanBeStatic
    componentMethod(message: string): void {
        alert(`Alert from RecordTypeFilterComponent ${message}`);
    }

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