Ag-Grid Cell Render don't display buttons correctly when used with Angular material tab

user_3018671 0
Viewed 500

I just started to use ag-grid in one of my projects and I created a Cell Renderer to display buttons in my "actions" columns, as you can see below:

enter image description here

Everything works fine but after I moved the grid inside of an Angular material I observed a strange behavior. If you navigate to the second tab and then you go back. The buttons are pushed out of the table:

enter image description here

You can check the behavior on stackblitz.

Any help or ideas are welcome. Thanks!

ag-grid-angular ag-grid angular10 angular grid
2 Answers

Weird... the column content is put in a completely different position in the DOM. But it works if you put a div around the ag-grid:

<mat-tab label="First">
  <div>
    <ag-grid-angular ...></ag-grid-angular>
  </div>
</mat-tab>

Don't ask me why... ;-)

user_30871300

I found a solution when reading material tab documentation:

<mat-tab label="First">
   <ng-template matTabContent>
    <ag-grid-angular ...></ag-grid-angular>
   </ng-template>
  </div>
</mat-tab>

You can wrap the tab content in "ng-template matTabContent". This will inject the html structure for this tab only when the tab is active.

user_30186710
Related