Angular Datatables export buttons using cached data

Question

I'm running an Angular 13 application that queries an API for employees in a given country and office/branch from a form, then displays the list in a table. I'm using angular-datatables for the table, and have included the print and export buttons for clipboard, CSV, text, excel, and pdf.

On repeated submissions of the form, the updated list of employees is displayed correctly, but only the initial data from the first submission is being exported to the various options.

<div class="container">
  <div class="row">
    <form class="needs-validation" role="form" (ngSubmit)="onSubmit(branchSearchForm)" #branchSearchForm="ngForm">
      <div class="form-group row pt-3 ps-3">
        <div class="col-lg-6 col-form-label">
          <label for="country-input-box" aria-label="branch">Branch</label>
        </div>
        <div class="col-lg-5">
          <input id="country-input-box" name="country" type="text" class="form-control" ngModel/>
        </div>
      </div>
      <div class="form-group row pt-3 ps-3">
        <div class="col-md-6 col-form-label">
          <label for="branch">Branch</label>
        </div>
        <div class="col-md-5">
          <input id="branch" name="branch" class="form-control" type="text" ngModel/>
        </div>
      </div>
      <div class="form-group row pt-3 ps-3 pb-3">
        <div class="col-md-6 col-form-label">
          <em class="small" translate>requiredField</em>
        </div>
        <div class="col-md-5">
          <div class="d-grid gap-2 d-md-block">
            <button type="submit" class="btn btn-primary">Search</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="row" *ngIf="branch$ | async as branch">
    <table class="row-border hover table table-striped" *ngIf="branch.employees> 0" [dtOptions]="dataTableOptions" datatable>
      <thead>
        <tr>
          <th translate>ID</th>
          <th translate>First Name</th>
          <th translate>Surname</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let employee of branch.employees">
          <td>{{employee.id}}</td>
          <td>{{employee.firstName}}</td>
          <td>{{employee.surName}}</td>
        </tr>
      </tbody>
    </table>
    <div *ngIf="branch.employees === 0">No employees</div>
  </div>
</div>

Branch {
    id: number;
    country: string;
    employees: Employee[];
}

Employee {
    id: number;
    firstName: string;
    surName: string;
}

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html'
}
export EmployeesFormComponent implements OnInit {
  branch$!: Observable<Branch>;

  dataTableOptions: any;

  constructor(private apiService: ApiService) {
    dataTableOptions = {};
  }

  ngOnInit(): void {
    this.dataTableOptions = {
      pagingType: 'full_numbers',
      processing: true,
      columns: [
        { data: 'id' },
        { data: 'firstName' },
        { data: 'surName' }
      ],
      dom: 'Bfrtip',
      buttons: [
        'copy',   // Copy table to clipboard
        'print',  // Print table
        'csv',    // Export to CSV
        'excel',  // Export to Excel
        'pdf'     // Export to PDF
      ]
    };
  }

  onSubmit(branchSearchForm: any): void {
    const country: string = matchSearchForm.form.controls.country.value;
    const branch: string = matchSearchForm.form.controls.value;
    this.apiService.getBranchDetails(country, branch)
                   .subscribe((branch: Branch) => {
                                this.branch$ = of(branch);
                              });
  }
}

@Injectable({
  providedIn: 'root',
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getBranchDetails(country: string, branch: string): Observable<Branch> {
    const url: string = `api/${country}/${branch}/details`;
    return this.http.get<Branch>(url);
  }
}

What do I need to change to fix this?

Alain Boudard · Accepted Answer · 2022-03-11 14:09:35Z

1

I thnink should not do the subscribe() followed with the of() call. This is what your branch$ Observable is used for : consume directly the result of a service method. Then you create a sub component and inject the branch$ with a Pipe async.

I suggest you create a Subject Service that can broadcast the data.

Otherwise, since you use the subscribe() method, you simply could get rid of the Observable and Pipe async.

Explained here : https://dev.to/juliandierkes/two-ways-of-using-angular-services-with-the-httpclient-51ef

answered Mar 11, 2022 at 14:09

Alain Boudard

8937 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mccarthyj Over a year ago

thanks, I had t o rework the api response, and then I was able to assign the response directly to the observable

Alain Boudard Over a year ago

Excellent ! Glad you made it :)

Collectives™ on Stack Overflow

Angular Datatables export buttons using cached data

1 Answer 1

2 Comments

Your Answer

Collectives™ on Stack Overflow

Angular Datatables export buttons using cached data

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest