Can't find property 'exporter' while using Mat-Table-Exporter

user_11840165 0
Viewed 3094

I'm working on a report page that displays the report based on the daterange entered by the user. The report is in tabular form and I want to export it to excel and csv files . I'm using angular version 9 and trying to export the table data into xls, csv using [mat-table-exporter] (https://www.npmjs.com/package/mat-table-exporter). The directive uses different exporter services for different exporting types. But i'm getting this error in the html file that says "cannot read property 'exportTable' of undefined". Could you help me resolve the issue?

<h3 align="center">Payment Gateway Report</h3>
<div class="container-fluid" style="font-size: 18px;margin-top: 20px;">
    <div class="row">
        <div class="col-lg-3 col-xs-6 col-sm-6 col-md-6">
            <ejs-daterangepicker placeholder="From and To Date"format='dd-MM-yyyy' [max]='maxDate' [(ngModel)]="date"></ejs-daterangepicker>
        </div>
        <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6">
            <button class="btn customBtn" (click)="getTableData()">Get Report</button>
        </div>
        <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6" *ngIf="showTable">
            <button mat-button(click)="exporter.exportTable('csv')">Download</button>
        </div>
    </div>
</div>

<div style="overflow: auto;" *ngIf="showTable">

    <table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;"#exporter="matTableExporter" matSort>
    
        <ng-container matColumnDef="superMerchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> superMerchantName </th>
            <td mat-cell *matCellDef="let element">{{element.superMerchantName}} </td>
        </ng-container>
        <ng-container matColumnDef="branchName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> branchName </th>
            <td mat-cell *matCellDef="let element"> {{element.branchName}}</td>
        </ng-container>
        
        <ng-container matColumnDef="branchLoginId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header align="center"> branchLoginId </th>
            <td mat-cell *matCellDef="let element"> {{element.branchLoginId}} </td>
        </ng-container>
        
    
        <ng-container matColumnDef="merchantUserId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantUserId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantUserId}} </td>
        </ng-container>
    
        <ng-container matColumnDef="merchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantName</th>
            <td mat-cell *matCellDef="let element"> {{element.merchantName}} </td>
        </ng-container>
    
        <ng-container matColumnDef="customerName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerName </th>
            <td mat-cell *matCellDef="let element"> {{element.customerName}} </td>
        </ng-container>
        
        
        <ng-container matColumnDef="customerMobileNo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerMobileNo </th>
            <td mat-cell *matCellDef="let element"> {{element.customerMobileNo}} </td>
        </ng-container>

        <ng-container matColumnDef="loanId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> loanId </th>
            <td mat-cell *matCellDef="let element"> {{element.loanId}} </td>
        </ng-container>
        <ng-container matColumnDef="paymentMode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> paymentMode </th>
            <td mat-cell *matCellDef="let element"> {{element.paymentMode}} </td>
        </ng-container>

       
        
        <ng-container matColumnDef="region">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> region </th>
            <td mat-cell *matCellDef="let element"> {{element.region}} </td>
        </ng-container>
        <ng-container matColumnDef="bankName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> bankName </th>
            <td mat-cell *matCellDef="let element"> {{element.bankName}} </td>
        </ng-container>
        <ng-container matColumnDef="cardScheme">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardScheme </th>
            <td mat-cell *matCellDef="let element"> {{element.cardScheme}} </td>
        </ng-container>
        <ng-container matColumnDef="cardNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardNumber </th>
            <td mat-cell *matCellDef="let element"> {{element.cardNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="deviceImei">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> deviceImei </th>
            <td mat-cell *matCellDef="let element"> {{element.deviceImei}} </td>
        </ng-container>
        <ng-container matColumnDef="latitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> latitude </th>
            <td mat-cell *matCellDef="let element"> {{element.latitude}} </td>
        </ng-container>
        <ng-container matColumnDef="longitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> longitude </th>
            <td mat-cell *matCellDef="let element"> {{element.longitude}} </td>
        </ng-container>
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> status </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>
        <ng-container matColumnDef="requestedTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> requestedTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.requestedTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="responseTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> responseTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.responseTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="merchantId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantId}} </td>
        </ng-container>
        <ng-container matColumnDef="remarks">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> remarks </th>
            <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
        </ng-container>
        <ng-container matColumnDef="stan">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> stan </th>
            <td mat-cell *matCellDef="let element"> {{element.stan}} </td>
        </ng-container>
        <ng-container matColumnDef="statusCode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> statusCode </th>
            <td mat-cell *matCellDef="let element"> {{element.statusCode}} </td>
        </ng-container>
      

        
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns:   getDisplayedColumns();"></tr>
    
    </table>
    </div>

angular html
1 Answers

It is about the way you are calling the template referance exporter.

A template referance is not accessible outside it's template scope. By wrapping your table inside a structural directive (*ngIf) you happen to limit the template variable #exporter to be accessible only inside that div with *ngIf.

You can rather use CSS to show/hide your table instead of using ngIf. I wouldn't recommend it though. The easiest and best way to resolve your issue is just simply put the button inside the same ng-template context.

For example this should work:

<h3 align="center">Payment Gateway Report</h3>

<div style="overflow: auto;" *ngIf="showTable">

    <table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;"#exporter="matTableExporter" matSort>

        <ng-container matColumnDef="superMerchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> superMerchantName </th>
            <td mat-cell *matCellDef="let element">{{element.superMerchantName}} </td>
        </ng-container>
        <ng-container matColumnDef="branchName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> branchName </th>
            <td mat-cell *matCellDef="let element"> {{element.branchName}}</td>
        </ng-container>

        <ng-container matColumnDef="branchLoginId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header align="center"> branchLoginId </th>
            <td mat-cell *matCellDef="let element"> {{element.branchLoginId}} </td>
        </ng-container>


        <ng-container matColumnDef="merchantUserId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantUserId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantUserId}} </td>
        </ng-container>

        <ng-container matColumnDef="merchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantName</th>
            <td mat-cell *matCellDef="let element"> {{element.merchantName}} </td>
        </ng-container>

        <ng-container matColumnDef="customerName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerName </th>
            <td mat-cell *matCellDef="let element"> {{element.customerName}} </td>
        </ng-container>


        <ng-container matColumnDef="customerMobileNo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerMobileNo </th>
            <td mat-cell *matCellDef="let element"> {{element.customerMobileNo}} </td>
        </ng-container>

        <ng-container matColumnDef="loanId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> loanId </th>
            <td mat-cell *matCellDef="let element"> {{element.loanId}} </td>
        </ng-container>
        <ng-container matColumnDef="paymentMode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> paymentMode </th>
            <td mat-cell *matCellDef="let element"> {{element.paymentMode}} </td>
        </ng-container>



        <ng-container matColumnDef="region">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> region </th>
            <td mat-cell *matCellDef="let element"> {{element.region}} </td>
        </ng-container>
        <ng-container matColumnDef="bankName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> bankName </th>
            <td mat-cell *matCellDef="let element"> {{element.bankName}} </td>
        </ng-container>
        <ng-container matColumnDef="cardScheme">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardScheme </th>
            <td mat-cell *matCellDef="let element"> {{element.cardScheme}} </td>
        </ng-container>
        <ng-container matColumnDef="cardNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardNumber </th>
            <td mat-cell *matCellDef="let element"> {{element.cardNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="deviceImei">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> deviceImei </th>
            <td mat-cell *matCellDef="let element"> {{element.deviceImei}} </td>
        </ng-container>
        <ng-container matColumnDef="latitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> latitude </th>
            <td mat-cell *matCellDef="let element"> {{element.latitude}} </td>
        </ng-container>
        <ng-container matColumnDef="longitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> longitude </th>
            <td mat-cell *matCellDef="let element"> {{element.longitude}} </td>
        </ng-container>
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> status </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>
        <ng-container matColumnDef="requestedTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> requestedTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.requestedTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="responseTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> responseTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.responseTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="merchantId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantId}} </td>
        </ng-container>
        <ng-container matColumnDef="remarks">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> remarks </th>
            <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
        </ng-container>
        <ng-container matColumnDef="stan">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> stan </th>
            <td mat-cell *matCellDef="let element"> {{element.stan}} </td>
        </ng-container>
        <ng-container matColumnDef="statusCode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> statusCode </th>
            <td mat-cell *matCellDef="let element"> {{element.statusCode}} </td>
        </ng-container>



        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns:   getDisplayedColumns();"></tr>

    </table>
    <div class="container-fluid" style="font-size: 18px;margin-top: 20px;">
        <div class="row">
            <div class="col-lg-3 col-xs-6 col-sm-6 col-md-6">
                <ejs-daterangepicker placeholder="From and To Date"format='dd-MM-yyyy' [max]='maxDate' [(ngModel)]="date"></ejs-daterangepicker>
            </div>
            <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6">
                <button class="btn customBtn" (click)="getTableData()">Get Report</button>
            </div>
            <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6" *ngIf="showTable">
                <button mat-button(click)="exporter.exportTable('csv')">Download</button>
            </div>
        </div>
    </div>

    </div>

EDIT:

You forgot to add matTableExporter directive selector in your mat-table. It should be like this:

<table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;" matTableExporter #exporter="matTableExporter" matSort>
user_114207600
Related