How to implement using Async Pipe for Data or just using Observable Data

[leo00723]

Hi there

I use firebase as a backend so i get all the data through the AngularFire package.

How do i implement this table using an async pipe or "the angular way" as the documentation is very confusing.

everything works when using an async pipe and ngFor except pagination and the suggested click event

HTML FILE

<div
  class="table-responsive shadow p-3 rounded-lg mb-5"
  *ngIf="estimates$ | async as data; else noData"
>
  <table
    [dtOptions]="dtOptions"
    datatable
    class="row-border table table-striped"
  >
    <thead>
      <tr>
        <th>Code</th>
        <th>Site Name</th>
        <th>Customer</th>
        <th class="text-center">Scaffold Code</th>
        <th class="text-center">Date Created</th>
        <th class="text-end">Total Amount</th>
        <th class="text-end">Total Spend</th>
        <th class="text-end">Total Profit</th>
        <th class="text-center">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of data" (click)="selectedItem.emit(item)">
        <td>{{ item.code }}</td>
        <td style="word-wrap: break-word">{{ item.siteName }}</td>
        <td>{{ item.customer.name }}</td>
        <td class="text-center">{{ item.scaffoldCode }}</td>
        <td class="text-center">{{ item.date | date }}</td>
        <td class="text-end">
          {{ item.company.currency }}{{ item.total | number : "0.2-2" }}
        </td>
        <td class="text-end">
          {{ item.company.currency }}{{ item.budget?.cost | number : "0.2-2" }}
        </td>
        <td class="text-end">
          {{ item.company.currency
          }}{{ item.budget?.profit | number : "0.2-2" }}
        </td>
        <td class="text-center">
          <ion-badge [color]="getStatus(item.status)" mode="ios">{{
            item.status
          }}</ion-badge>
        </td>
      </tr>
    </tbody>
  </table>
</div>

TS FILE

  dtOptions: any = {
    pagingType: 'full_numbers',
    pageLength: 10,
    dom: 'Bfrtip',
    buttons: ['csv', 'excel', 'pdf'],
  };

[shanmukhateja]

Hello,

We have recently updated the documentation to reflect deprecation of Angular way examples.

This is to ensure users don't run into bugs when using the library.

Please look at TemplateRef and Using Angular Pipes examples to refactor your implementation.

I don't think you'll be able to use async pipe anymore because the rendering of content will be handled by datatables library and not Angular.

[leo00723]

Hi there Thank you for the quick response. The issue is the template ref documentation is quite confusing to be honest. Do i have to subscribe to the observable first and pass that data into the ajax option. This is where things are not really clear as the code example also contain so much more information. Any assistance would be greatly appreciated

…

On Tue, 07 Feb 2023, 06:42 Surya Teja K, ***@***.***> wrote: Hello, We have recently updated the documentation to reflect deprecation of Angular way examples. This is to ensure users don't run into bugs when using the library. Please look at TemplateRef and Using Angular Pipes examples to refactor your implementation. I don't think you'll be able to use async pipe anymore because the rendering of content will be handled by datatables library and not Angular. — Reply to this email directly, view it on GitHub <#1714 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALJP5WSJ4C6IAIZHUX32EALWWHHEFANCNFSM6AAAAAAUTAUUKA> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[shanmukhateja]

Hi,

Yes. You need to subscribe first and use callback inside ajax for "informing" datatables library of the data.

[leo00723]

Would it be possible for you to provide a code example as I get the error "callback is not a function"?

I have tried using the data property as instructed by the Datatables documentation but I get an error when trying to access nested data in the object.

eg:

dTOptions = {
   data: this.estimates,
   columns: [{title:'Customer', data:'customer.name'}]
}

Now this works but I get an error alert for customer.name although after closing the alert the customer name does show.

[leo00723]

Just to give you an idea, this is the table I am looking to build.

This is done kinda using the angular way as it is quite complex to do using the template ref solution (way too confusing), for instance, the currency symbol changes for each user profile, and the fact that I can't really construct my own string you are forced to use the data from the object as is. I could use mappings to sanitize my data in a pipe before subscribing to it but then that breaks the structure of my data which is needed later on.

HTML

<div class="table-responsive shadow p-3 rounded-lg mb-5">
  <table
    [dtOptions]="dtOptions"
    [dtTrigger]="dtTrigger"
    datatable
    class="table-hover table table-striped"
  >
    <thead>
      <tr>
        <th>Code</th>
        <th>Site Name</th>
        <th>Customer</th>
        <th class="text-center">Scaffold Code</th>
        <th class="text-center">Date Created</th>
        <th class="text-end">Total Amount</th>
        <th class="text-end">Total Spend</th>
        <th class="text-end">Total Profit</th>
        <th class="text-center">Status</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngIf="estimates.length; else noData"></ng-container>
      <tr *ngFor="let item of estimates" (click)="selectedItem.emit(item)">
        <td>{{ item.code }}</td>
        <td style="word-wrap: break-word">{{ item.siteName }}</td>
        <td>{{ item.customer.name }}</td>
        <td class="text-center">{{ item.scaffoldCode }}</td>
        <td class="text-center">{{ item.date | date }}</td>
        <td class="text-end">
          {{ item.company.currency }}{{ item.total | number : "0.2-2" }}
        </td>
        <td class="text-end">
          {{ item.company.currency }}{{ item.budget?.cost | number : "0.2-2" }}
        </td>
        <td class="text-end">
          {{ item.company.currency
          }}{{ item.budget?.profit | number : "0.2-2" }}
        </td>
        <td class="text-center">
          <ion-badge [color]="getStatus(item.status)" mode="ios">{{
            item.status
          }}</ion-badge>
        </td>
      </tr>
      <ng-template #noData></ng-template>
    </tbody>
  </table>
</div>

TS

import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';
import { Subject } from 'rxjs';
import { Estimate } from 'src/app/models/estimate.model';

@Component({
  selector: 'app-estimate-table',
  templateUrl: './estimate-table.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EstimateTableComponent implements OnInit, OnDestroy {
  @Output() selectedItem = new EventEmitter<Estimate>();
  estimates: Estimate[];
  dtOptions: any = {};
  dtTrigger: Subject<any> = new Subject<any>();
  @Input() set value(estimates: Estimate[]) {
    this.estimates = estimates;
    this.dtTrigger.next(null);
  }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      dom: 'Bfrtip',
      buttons: ['csv', 'excel'],
    };
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  getStatus(status: string) {
    switch (status) {
      case 'accepted':
        return 'success';
      case 'revised':
        return 'tertiary';
      case 'pending':
        return 'primary';
      case 'rejected':
        return 'danger';
    }
  }
}

The one issue I face with this is if the data updates as the observable is a hot observable. I get the cannot reinitialize table error.

is there any way to improve this solution ?