Angular data-grid (ag-grid) sideBar is not working

Question

data-grid.component.html

<ag-grid-angular  style="width: 100%; height: 500px;" [sideBar]='true' [ngClass]="isEditable ? 'edit-table' : 'table'" class="ag-theme-balham"  [gridOptions]="gridOptions" [frameworkComponents]="frameworkComponents"  (gridReady)="onGridReady($event)">

data-grid.component.ts import { HttpClient } from "@angular/common/http";

import 'ag-grid-enterprise';
import { PropertyKeys } from "ag-grid/dist/lib/propertyKeys";
import { ColDefUtil } from "ag-grid/dist/lib/components/colDefUtil";
// fix wrong property warning
PropertyKeys.ALL_PROPERTIES.push("__ob__");
ColDefUtil.ALL_PROPERTIES.push("__ob__");

Please check the below error.

Template parse errors: Can't bind to 'sideBar' since it isn't a known property of 'ag-grid-angular'. 1. If 'ag-grid-angular' is an Angular component and it has 'sideBar' input, then verify that it is part of this module. 2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" style="margin-bottom: 10px;"> ][sideBar]='true' [ngClass]="isEditable ? 'edit-table' : 'table'" class="ag-theme-balham" [gridOption"): ng:///AppModule/DataGridComponent.html@34:58 at syntaxError (compiler.js:486)

Answer 1

As the error said the grid doesn't recognize this property (sideBar) and this because you're using an old version of ag-grid (<19).

For the old version you should use 'showToolPanel' instead of 'sideBar'.

You can read ag-grid changelog for version 19.0.0

Also be aware for this (as they described):

"The NPM package name for the free module of ag-Grid is now ag-grid-community instead of ag-grid. This means you install with npm install ag-grid-community and then you reference like import {Grid, GridOptions} from "ag-grid-community"."