Cell renderer component moving outside of an AG-grid when it is inside a mat tab

I have two AG-grid displaying datas. Each of them has, at the end of each row, two icons meant to modify or suppress the data line. They each are inside of a mat tab.

<mat-tab-group>
<mat-tab label="Adresses">
<div class="col d-flex justify-content-end py-3"><button class="btn btn-major" *ngIf="modify" (click)="showCreateAdresseDialog()">CRÉER</button></div>
<ag-grid-angular
style="height: 600px"
class="ag-theme-alpine"
[rowData]="rowData"
[gridOptions]="gridOptions"
suppressCellSelection="true"
[paginationAutoPageSize]="true"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
[overlayLoadingTemplate]="overlayLoadingTemplate"
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
</mat-tab>

<mat-tab label="Rôles">
<div class="col d-flex justify-content-end py-3"><button class="btn btn-major" (click)="showCreateRoleDialog()" *ngIf="modify">CRÉER</button></div>
<ag-grid-angular
style="height: 600px"
class="ag-theme-alpine"
[rowData]="rolesRowData"
[columnDefs]="columns"
[gridOptions]="rolesGridOptions"
suppressCellSelection="true"
[paginationAutoPageSize]="true"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
[overlayLoadingTemplate]="overlayLoadingTemplate"
[overlayNoRowsTemplate]="overlayNoRolesRowsTemplate"
(gridReady)="onRolesGridReady($event)">
</ag-grid-angular>
</mat-tab>
</mat-tab-group>


Below, you may see how I added the components in the AG-grid.

frameworkComponents = {
modifierButtonRenderer: ActeurModifierAdresseButtonRendererComponent,
// Other components
};

gridOptions = {
context: {
parentComponent: this
},
defaultColDef: {
sortable: true,
filter: true,
suppressMovable: true
},
columnDefs: [
{ /* some data columns */ },
{cellRenderer: 'modifierButtonRenderer', pinned: 'right', width: 50, suppressMenu: true},
{cellRenderer: 'supprimerButtonRenderer', pinned: 'right', width: 50, suppressMenu: true}
]


Now, each button is rendered inside the AG-grid. But if switch to the second mat-tab, and then go back to the first one, each cellRenderer is moved outside grid. It's not just the CSS that changed the position of the element. They moved just after the closing tag of the grid.

Before I switch mat tabs

After the switch

Does anyone have an idea of what is happening, or how I can fix this?

Thanks,

Have a nice day

Continue reading...