title: Ag grid SideBar with custom Tool Panel not showing
body: <p>I was following a tutorial on how to setup a side bar with custom tool panel in angular app.</p>
  <p>For some reason, it is not showing.</p>
  <p>This is ag grid definition:</p>
  <pre><code>&lt;ag-grid-angular
  style=&quot;width: 100%; height: 100%;&quot;
  class=&quot;ag-theme-alpine&quot;
  [rowData]=&quot;rowData&quot;
  [columnDefs]=&quot;columnDefs&quot;
  [defaultColDef]=&quot;defaultColDef&quot;
  [sideBar]=&quot;sideBar&quot;
  [icons]=&quot;icons&quot;
  [frameworkComponents]=&quot;frameworkComponents&quot;
  (gridReady)=&quot;onGridReady($event)&quot;
  (cellValueChanged)=&quot;onCellValueChanged($event)&quot;
  &gt;
  &lt;/ag-grid-angular&gt;
  </code></pre>
  <p>This is side bar definition inside constructor:</p>
  <pre><code>    this.sideBar = {
        toolPanels: [
          {
            id: 'customStats',
            labelDefault: 'Custom Stats',
            labelKey: 'customStats',
            iconKey: 'custom-stats',
            toolPanel: 'customStats',
          }
        ],
        defaultToolPanel: 'customStats',
      };
      this.frameworkComponents = { customStats: SumToolPanel };
  </code></pre>
  <p>The custom tool panel is copy/paste from <a href="https://www.ag-grid.com/angular-data-grid/component-tool-panel/#example-custom-stats-tool-panel-component" rel="nofollow noreferrer">dookumentation</a></p>
  <p>i have named it <code>SumToolPanel</code>. Also, i have noticed that it's not being called, I've placed break point in every function of <code>SumToolPanel</code></p>
  <p>this is in app.module.ts</p>
  <pre><code>imports: [
   ...
    imports: [
       AgGridModule.withComponents([SumToolPanel])
    ]
  ...
  ]
  
  </code></pre>