CODEWITHSUNDEEP
angularsortingfilterangular5ag-grid
Deepanshu Kaushik
Deepanshu Kaushik

Reputation: 141

Adding external ag-grid filter on my angular app

I'm trying to add in the external filter on my angular application but struggling a big time.

Component data- here is the sample component in which I'm loading in external json file

import { Component, OnInit } from '@angular/core';

import {AgGridModule} from "ag-grid-angular";
import { GridOptions } from 'ag-grid/main';
import { HttpClient } from "@angular/common/http";

import {NgModel} from '@angular/forms';

import "ag-grid-enterprise";

@Component({
  selector: 'app-funds-table',
  templateUrl: './funds-table.component.html',
  styleUrls: ['./funds-table.component.css']
})

export class FundsTableComponent implements OnInit {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  ngOnInit() {}
  constructor(private http: HttpClient) {
    this.columnDefs = [{headerName: "Ticker", field: "Ticker"},
      {headerName: "Id", field: "Id"},];
  }    
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
    .get("./../assets/fundsData/fund_info.json")
      .subscribe(data => {
        params.api.setRowData(data);
      });
}}

HTML file- here is the sample html template I can't get the external button working using ngmodel 2-way binding.

<div class="container">
  <div class="header" style="display:inline">
    <div style="display:inline-block">Overview</div>
    <div style="display:inline-block">Risk</div>
  </div>
<div><div><form>
    <input type="text" ng-model="$myGrid.gridOptions.quickFilterText" placeholder="Type text to filter..." class="toolbarFilterTextBox"/>
</form>
      <ag-grid-angular 
      style="position:absolute;padding-left:5%;; bottom:0px;width: 90%; height: 650px;"
      #agGrid  id="myGrid" class="ag-fresh"
      [columnDefs]="columnDefs"
    [animateRows]="true"
    [enableRangeSelection]="true"
    [enableSorting]="true"
    [enableFilter]="true"
    (gridReady)="onGridReady($event)">
      </ag-grid-angular>
  </div>
</div>
</div>

Would be of really great if someone can help me :)

Upvotes: 0

Views: 1575

Answers (1)

florentine
florentine

Reputation: 657

This syntax in your html file ng-model="$myGrid.gridOptions.quickFilterText" looks like it is from AngularJS but it looks like you are using Angular. You should first change that to [ngModel].

The filter documentation for ag-grid is pretty thorough. So I'd recommend you take a look at that. You have to specify some filter details in the columnDefs which seems to be missing from yours.

Here is a working quick filter example: https://plnkr.co/edit/Am65BwIRslbQLfAB4h4I?p=preview

Upvotes: 1

Related Questions