Custom toolpanel rendered outside of grid

Question

EDIT: thanks for the answers below. I haven't been able to solve it, but I have found the culprit in my project. Seems that the issue appears when putting the grid inside a material tab list that is generated with *ngFor I created an example where it goes wrong

I am using AG Grid v25 together with angular 11. When trying to build a custom toolpanel, the content always renders outside of the grid (below the grid). Even if I just put a plain <div>test</div> as toolpanel html content. The toolpanel button is shown and working, but opens up a blank panel while the content is rendered below the grid. Also, the content is always visible, whether the custom toolpanel with the blank content is opened or not.

I am getting no errors or warnings. I have been trying to compare with the default filter toolpanel code posted on github, but I'm at a loss. Is there anything I'm missing?

Registering my panel in the component (I also registered the panel in the module as the docs state):

this.frameworkComponents = {
            userSettingsToolPanel: UserSettingsToolPanel
    };

The sidebar code:

this.sideBar = {
    toolPanels: [
      {
        id: "columns",
        labelDefault: "Columns",
        labelKey: "columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel"
      },
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel"
      },
      {
          id: 'userSettingsToolPanel',
          labelDefault: 'Settings',
          labelKey: 'userSettingsToolPanel',
          iconKey: 'menu',
          toolPanel: 'userSettingsToolPanel',
        }
    ],
    hiddenByDefault: false,
    defaultToolPanel: null
  };

The toolpanel code:

import { Component, ViewChild, ViewChildren, ViewContainerRef } from '@angular/core';
import { IToolPanel, IToolPanelParams } from '@ag-grid-community/all-modules';

@Component({
  selector: 'usersettings-panel',
  template: ` <div>test</div>`,
  styles: [``]
}

)
export class UserSettingsToolPanel implements IToolPanel {

  refresh(): void {
    throw new Error('Method not implemented.');
  }
  private params: IToolPanelParams;

  agInit(params: IToolPanelParams): void {
    this.params = params;


  }

}

Answer 1

Can you try setting the popupParent? https://www.ag-grid.com/angular-grid/context-menu/#popup-parent

popupParent: Element;

constructor() {
    this.popupParent = document.querySelector('body');
  }

<ag-grid-angular [popupParent]="popupParent">
</ag-grid-angular>