app.component.html
<div class="inlineBlock">
<select [(ngModel)]="portId" id="portDropdownMenu" (change)="externalFilterChanged()">
<option *ngFor="#portId of portIds">{{portId}}</option>
</select>
</div>
<div class="container">
<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()">
</ag-grid-ng2>
</div>
Run Code Online (Sandbox Code Playgroud)
app.component.ts
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 …Run Code Online (Sandbox Code Playgroud) ag-grid ×1