Can this PrimeNG data table take directly an Observable (emitting array of objects) instead the standard array of objects?

Question

I am working on an Angular application using PrimeNG. In particular I am using a PrimeNG DataTable, this coponent: https://primefaces.org/primeng/showcase/#/table

I have no problem using it in the way shown in the previous officual documentation. Basically I can retrieve a list of objects from Firebase FireStore database and then use this list of object into the data table HTML definition in the proposed way, something like this:

<p-table [value]="MY-RETRIEVED-OBJECT-LIST">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

I am asking if is it possible (and in case how) use a more reactive approach.

I try to explain with an example. Into my component TypeScript code I have not a list of object but I have this Observable:

employeesList$:Observable<Employee[]>;

Into the ngOnInit() of my component I have:

ngOnInit() {

    this.loadEmployeesList();
    ................................
    ................................
    ................................

}

This loadEmployeesList() is a component method that simply call a service class in order to obtain the previous employeesList$:Observable<Employee[]> object:

async loadEmployeesList() {
    this.employeesList$ = await this.employeeService.getAllEmployees();
}

So basically in this way I am not subscribing an Observable in order to retrieve the explicit list of object that have to be passed to my PrimeNG data table definition but I have an Observable emitting an array of Employee object (tipically an Observable can be used in reactive style directly into the view to obtain data), somenthing like this:

<div class="col-4" *ngFor="let wine of myObservable$ | async;">
    .............................................................
    .............................................................
    .............................................................
</div>

but in this case my PrimeNG p-table element seems to accept only a classic array and not an Observable.

Can I pass somehow my Observable to my p-table element? Or can I obtain the array of object that have to be passed directly into my HTML code? Or maybe is it neater obtain the array of object that will be rendered by my data table subscribing the Observable into the TypeScript code?

Answer 1

did you try this ?

<p-table [value]="employeesList$ | async">

Answer 2

Dont forget about strict null checks in this scenario!

<p-table [value]="(employeesList$ | async)!" ...>

https://angular.io/guide/template-typecheck#strict-null-checks https://stackoverflow.com/a/61781052/1440240