Ag-grid external filter in angular 2, filter presents but grid not updating
<p>app.component.html</p>

<pre><code>&lt;div class="inlineBlock"&gt;
    &lt;select [(ngModel)]="portId" id="portDropdownMenu" (change)="externalFilterChanged()"&gt;
        &lt;option *ngFor="#portId of portIds"&gt;{{portId}}&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div class="container"&gt;
    &lt;ag-grid-ng2 #agGrid
                 [gridOptions]="gridOptions"
                 [columnDefs]="myColumnDefs"
                 [rowData]="myRowData"
                 enableColResize
                 rowSelection="multiple"
                 enableSorting
                 enableFilter
                 [isExternalFilterPresent]="isExternalFilterPresent"
                 [doesExternalFilterPass]="doesExternalFilterPass"
                 rowHeight="30"
                 headerHeight="40"
                 enableRangeSelection
                 suppressContextMenu
                 suppressMenuColumnPanel
                 rowGroupPanelShow="always"
                 rememberGroupStateWhenNextData
                 groupDefaultExpanded="-1"
                 groupHideGroupColumns
                 groupUseEntireRow
                 (modelUpdated)="onModelUpdated()"
                 (filterChanged)="onFilterChanged()"&gt;
    &lt;/ag-grid-ng2&gt;
&lt;/div&gt;
</code></pre>

<p>app.component.ts</p>

<pre><code>public isExternalFilterPresent() {
        return this.portType != "All Ports";
}

public doesExternalFilterPass(node) {
    switch (this.portType) {
        case "1": return node.data.Port === "1";
        case "2": return node.data.Port === "2";
        case "3": return node.data.Port === "3";
        default: return true;
    }

}

public externalFilterChanged() {
    var newValue = (&lt;HTMLInputElement&gt;document.getElementById("portDropdownMenu")).value
    this.portType = newValue;
    this.gridOptions.api.onFilterChanged();
}

public onFilterChanged() {
    if (this.gridOptions.api.isAnyFilterPresent()) {
        this.gridOptions.api.setRowData(this.gridOptions.rowData);
        this.gridOptions.api.refreshView();
    }
    console.log("filter changed ...");
}
</code></pre>

<p>By console.log(this.gridOption.isAnyFilterPresented()), I notice the filter does exist when dropdown menu is updated. However, the grid is not updating according to external filter.</p>

<p>I am pretty sure "isExternalFilterPresent()" and "doesExternalFilterPass(node)" run through and provides the correct return value. My understanding is that ag-grid will take care of the rest but it is not doing it. Any idea?</p>