PrimeNg: ViewChildren QueryList is always empty

Question

I'm using an primeng Datable inside an ngIf. Each time ngIf condition changes, I need to get access to embedded DataTable:

<div *ngIf="rowVisible">
    <p-table ...>
    </p-table>
</div> 

My component code is:

import { DataTable } from 'primeng/primeng';

@Component({
    moduleId: module.id,
    templateUrl: 'search.component.html',
})
export class SearchComponent {
    @ViewChildren(DataTable) public dataTable: QueryList<DataTable>;

    public ngAfterViewInit(): void
    {
        this.dataTable.changes.subscribe((comps: QueryList<DataTable>) =>
        {
            if (comps.length > 0) {
                comps.first.reset();
            }
        });
    }
}

However, each time dataTable observable changes, comps.length is 0.

Any ideas?

Answer 1

<div *ngIf="rowVisible">
    <p-table #dataTable >
    </p-table>
</div> 

Setter for ViewChild():

 private dataTableRef: ElementRef;

 @ViewChild('dataTable') set dataTableContent(dataTableContent: ElementRef) {
    this.dataTableRef= content;
 }