Cannot filter, sort and more when dtTrigger present

[motcke]

:beetle: bug report

I have a nice view of DataTable with filter, export buttons, paginations etc. When adding the [dtTrigger]="dtTrigger" directive, all the header and footer features break, for example the search.

:microscope: Minimal Reproduction

https://stackblitz.com/edit/angular-datatables-gitter-fetmob?file=app/app.component.html

:8ball: Expected behavior

The footer and header features to appear

:camera: Screenshots

Getting this

instead of the expected

:globe_with_meridians: Your Environment

• node version:
• angular version:
• angular-cli version:
• jquery version:
• datatables version:
• angular-datatables version:

:memo: Additional context

[shanmukhateja]

Hi,

Your StackBlitz project works as expected.

Could you check if the bug still occurs in Angular 12?

We only support Angular 8 and above.

[motcke]

I'm using angular 10

Went over my stackblitz and it is not working properly for me, do we see different outputs? The issue is in the red area. The only difference between this table and the one below is the dtTrigger.

[shanmukhateja]

Hi, my bad. Your StackBlitz does have the error. I wasn't looking at the table on top.

So, you need to move this.dtTrigger.next() to ngAfterViewInit. This lifecycle event is called after ngOnInit and gives some time to set things in motion.

Note: You'll class needs to implement AfterViewInit, don't forget.

[motcke]

This actually seems to solve the issue, Thanks. Resolves stackblits https://stackblitz.com/edit/angular-datatables-gitter-dfx1hn?file=app/app.component.ts