NG0901 on ag-grid when calling query Params

i think i got far too lost and maybe i need someone to help me out on this. I will try to provide all the code snippets needed.

I have several similar pages, so it's kind of scrapped together, on each page the same error occurs.

Following problem: the code works using a link without query Param, but when using any kind of query Param to the link ?test=example it throws an NG0901. Initially i wanted to make use of the query Param to pre-check a radio button and use a filter on my ag-grid. But when it already initially fails I really wonder why the ag-grid table breaks-

calculator.component.ts

@Component({
selector: 'calculator',
templateUrl: './single-table-page.component.html',
})
export class CalculatorComponent extends SingleTablePageDirective implements OnInit {
selector = CalculatorSelectors;
collection = 'Calculator';
entry = 'calculator';
title = 'Calculator';
price = "removeFilter";
module = '';

initColumnDefs = (settings: SettingsState) => {
this.columnDefs = [
//...columns here
];
};
}


single-table-page.directive.ts


export class SingleTablePageDirective
implements ISingleTablePage, OnInit, OnDestroy {
selector: StateSelector;
collection: string;
entry: string;
title: string;
data$: any;
pagination$: Observable<number>;
gridApi: GridApi;
tables = [];
columnDefs: ColDef[] = [];
initColumnDefs: (settings: SettingsState) => void;

// dynamic columns
columnFilterSubscription: Subscription;

get icon(): string {
const page = this.route.snapshot.url.join('');
return NavIcons[page];
}

defaultColDef = {
sortable: true,
filter: true,
floatingFilter: true,
resizable: true,
};

components = {
imageRenderer: ImageRenderer,
navigationRenderer: NavigationRenderer,
};

constructor(
public router: Router,
public route: ActivatedRoute,
public store$: Store,
public toast: ToastService,
) { }

ngOnInit() {
this.pagination$ = this.store$.pipe(
select(SettingsSelectors.get),
map(({ settings }) => settings?.pagination),
tap((size) => {
if (this.gridApi && !this.gridApi.isDestroyed()) {
if (size === 0) {
this.gridApi.updateGridOptions({
pagination: false,
});
} else {
this.gridApi.updateGridOptions({
pagination: true,
paginationPageSize: size,
});
}
}
}),
);

this.columnFilterSubscription = this.store$
.pipe(select(SettingsSelectors.get))
.subscribe((settings) => {
this.initColumnDefs(settings);
this.gridApi?.updateGridOptions({ columnDefs: this.columnDefs });
this.gridApi?.autoSizeAllColumns();
});
this.data$ = this.store$.select(this.selector.getCollection, {
collection: this.entry,
});
}

ngOnDestroy() {
this.columnFilterSubscription.unsubscribe();
}

getNavigationOptions = ({ data }) => {
return [data?.Key, data.Category === 'INTERNAL' ? null : this.route];
};

onGridReady(event: any) {
this.gridApi = event.api;
//this.gridApi?.autoSizeAllColumns();
}
}



single-table-page.component.html


<div *ngIf="data$" class="page__container">
<h4 class="page__title"><img [src]="icon" />&nbsp;{{ title }}</h4>
<hr />
<div *ngFor="let table of data$ | async" class="table-container">
<h5 class="table__title" *ngIf="table.name">{{ table.name }}</h5>
<div class="table__description" *ngIf="table.description">
<markdown [data]="table.description"></markdown>
</div>
<ag-grid-angular #grid style="width: 100%" domLayout="autoHeight" class="ag-theme-alpine card fast-card"
[rowData]="table.rows" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [components]="components"
(gridReady)="onGridReady($event)" enableCellTextSelection="true" ensureDomOrder="true"
[pagination]="(pagination$ | async) > 0" [paginationPageSize]="pagination$ | async"
[paginationPageSizeSelector]="false" suppressDragLeaveHidesColumns="true">
</ag-grid-angular>
</div>
</div>



If you need more information, I would be able to provide more/detailed source code.

Continue reading...