Angular Primeng: Create Observable from lazyLoad event

Question

I've coded this html:

<p-table #usersTable ...>
<p-table>

I'm trying to pick up this element in order to create an observable on onLazyLoad event:

@ViewChild('usersTable')
private usersTable: ElementRef;

In order to create observable:

public ngAfterViewInit() {
    let lazyTable$ = Observable
        .fromEvent(this.usersTable.nativeElement, 'onLazyLoad')
        .pipe(debounceTime(300));
}

Nevertheless, this.usersTable is undefined.

By other hand, I not sure at all, of having observable event creation correctly.

I've used

@ViewChildren(DataTable) private usersTable: QueryList<DataTable>;

Nevertheless, when a change is made query.length is always 0:

let lazyClick$ = this.usersTable.changes
    .pipe(
        filter((query: QueryList<DataTable>) => {
            return query.length > 0;
        }),
        map((query: QueryList<DataTable>) => {
            return query.first;
        }),
        switchMap((table) => {
            return table.onLazyLoad.asObservable();
        })
    );

Any ideas?

are you using angular > v8? is the inside some *structural directive? — Vash72, Jun 05 '19 at 09:37
Yes, it's inside an `div *ngIf`, and when parent component is loaded ngIf is false. I'm using angular 4. — Jordi, Jun 05 '19 at 09:39
No... but sometines `ngIf` is true and sometimes is false (when is there no results to show). I need to pick table each time is visisble... — Jordi, Jun 05 '19 at 10:47
In that case you can check the `usersTable` variable, I'v updated my answer to show you — benshabatnoam, Jun 05 '19 at 10:59
Only one final issue. It doesn't work if I use `@ViewChild(DataTable)` instead of `@ViewChild('usersTable')`. Why? — Jordi, Jun 05 '19 at 11:03
Try `@ViewChild(DataTable) set content(usersTable: DataTable)` — benshabatnoam, Jun 05 '19 at 11:15

benshabatnoam · Answer 1 · 2019-06-05T11:00:30.467

1

Has you've comment that your table is inside a div with an *ngIf, you can use set content to get the reference for your table.

@ViewChild('usersTable') set content(usersTable: ElementRef) {
  if (usersTable) {
    let lazyTable$ = Observable
        .fromEvent(this.usersTable.nativeElement, 'onLazyLoad')
        .pipe(debounceTime(300));
  }
}

This way, this function will execute on each change to *ngIf condition change, meaning when your table gets shown or hidden.

edited Jun 05 '19 at 11:00

answered Jun 05 '19 at 09:45

benshabatnoam

7,161
1
31
52

I've changed my post. Could you help out? – Jordi Jun 05 '19 at 10:10

score 1 · Answer 2 · answered Apr 22 '20 at 03:13

I can Create Observable from lazyLoad event like this.

import { Table } from 'primeng/table';

  @ViewChild('usersTable') set content(usersTable: Table) {
    if (usersTable) {
      let lazyTable$ = usersTable.onLazyLoad.pipe(debounceTime(300));
      }
    }

Angular Primeng: Create Observable from lazyLoad event

2 Answers2