Ag-Grid filter not shown

Issue

I have this code in my html file:

<ag-grid-angular   #agGrid
                   style="height: 300px"
                   [rowData]="rowData"
                   [columnDefs]="columnDefs"
                   [gridOptions]="gridOptions"
                   [enableFilter]="true"
                   (rowSelected)="getSelectedRows($event)">

</ag-grid-angular>

and the filter icon is visible but when click on that nothing happens and ag-grid filters not shown. What is going wrong?

component.ts:

import { AgGridNg2 } from 'ag-grid-angular';

@ViewChild('agGrid') agGrid: AgGridNg2

columnDefs = [
    {
        headerName: 'row',
        headerCheckboxSelection: true,
        checkboxSelection: true,
        pinned: "right",
        width: 150
    },
    { headerName: 'code', field: 'Code'},
    { headerName: 'name', field: 'Name' },

];

gridOptions = {
    rowSelection: 'multiple',
    enableSorting: 'true',
    enableColResize: 'true',
    enableRtl: 'true',
    pagination: 'true',
    paginationAutoPageSize: 'true',
    animateRows: 'true'
}

Solution

you are assigning string 'true' to Boolean(true or false), and the ts code should be something like:

import {Component} from "@angular/core";
import {GridOptions} from "ag-grid";

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {

    private gridOptions: GridOptions ;
    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
          {
            headerName: 'row',
            headerCheckboxSelection: true,
            checkboxSelection: true,
            pinned: "right",
            width: 150,
            field: 'row'
          },
          { 
            headerName: 'Code', 
            field: 'code'
          },
          { 
            headerName: 'Name', 
            field: 'name' 
          },
        ];
        this.gridOptions.rowData = [
            {row: 'test', code: 'test' , name:'test'}
        ]
    }

    getSelectedRows(e){
      console.log('e')
    }
}

DEMO

Answered By - Fatemeh Fazli