search

HalitTalha / ng-material-extensions

Extended features for @angular/material components
Apache License 2.0
101 stars 52 forks source link

Error building matTableExporter #96

Closed starscr3am77 closed 3 years ago

starscr3am77 commented 3 years ago

I am using Angular 8. I tried the package using both 1.2.1 (like in the stackblitz example) and 1.2.5. With both versions I get the same error when trying to build:

ERROR in : There is no directive with "exportAs" set to "matTableExporter" ("="mat-elevation-z8"> <mat-table matTableExporter [dataSource]="dataSource" [ERROR ->]#exporter="matTableExporter">

Here is the code in my html file `

                  <div class="mat-elevation-z8">
                    <mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter">`

I have added it to the app.modules.ts file as well.

Here is my package.json file

{ "name": "material-dashboard-pro-angular", "version": "2.3.0", "license": "https://demos.creative-tim.com/material-dashboard-pro-angular2/documentation/tutorial", "repository": { "type": "git", "url": "https://github.com/creativetimofficial/ct-material-dashboard-pro-angular.git" }, "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install" }, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.6", "@angular/animations": "8.0.0", "@angular/cdk": "8.0.0", "@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/forms": "8.0.0", "@angular/http": "^7.2.16", "@angular/material": "8.0.0", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/platform-server": "8.0.0", "@angular/router": "8.0.0", "@types/datatables.net": "^1.10.18", "ajv": "6.10.0", "angular-calendar": "0.27.9", "angular-datatables": "^8.0.0", "angular-notifier": "^6.0.1", "animate.css": "3.7.2", "arrive": "2.4.1", "aws-amplify": "^3.3.14", "aws-sdk": "^2.710.0", "bootstrap": "4.3.1", "bootstrap-material-design": "4.1.2", "bootstrap-notify": "3.1.3", "bootstrap-rtl": "3.3.4", "bootstrap-select": "1.13.10", "bootstrap-tagsinput": "0.7.1", "cdk-table-exporter": "1.2.1", "chartist": "0.9.8", "chartist-plugin-zoom": "0.4.1", "core-js": "3.1.3", "datatables": "1.10.18", "datatables.net": "^1.10.20", "datatables.net-bs4": "1.10.19", "datatables.net-dt": "^1.10.20", "datatables.net-responsive": "2.2.3", "fullcalendar": "3.4.0", "googleapis": "40.0.0", "guid-typescript": "^1.0.9", "hammerjs": "2.0.8", "jasny-bootstrap": "3.1.3", "jquery": "3.4.1", "jquery-validation": "1.17.0", "jqvmap": "1.5.1", "mat-table-exporter": "1.2.1", "moment": "^2.24.0", "moment-timezone": "0.5.25", "ng2-nouislider": "1.8.2", "ng2-select": "2.0.0", "ngx-chips": "1.9.8", "ngx-toastr": "^11.0.0", "nouislider": "9.2.0", "pdfmake": "^0.1.69", "perfect-scrollbar": "1.1.0", "popper.js": "1.15.0", "primeicons": "^2.0.0", "primeng": "^9.0.0-rc.4", "rxjs": "6.5.2", "rxjs-compat": "6.5.2", "sweetalert2": "7.22.2", "twitter-bootstrap-wizard": "1.2.0", "uglify-js": "3.6.0", "validate": "3.0.1", "web-animations-js": "2.3.1", "zone.js": "0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "^0.803.29", "@angular/cli": "8.0.1", "@angular/compiler-cli": "8.0.0", "@types/bootstrap": "4.3.0", "@types/chartist": "0.9.46", "@types/jasmine": "3.3.13", "@types/jquery": "^3.3.29", "@types/node": "12.0.5", "codelyzer": "5.1.0", "jasmine-core": "3.4.0", "jasmine-spec-reporter": "4.2.1", "karma": "4.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "2.0.0", "karma-coverage-istanbul-reporter": "2.0.5", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "protractor": "5.4.2", "ts-node": "8.2.0", "tslint": "5.17.0", "typescript": "3.4.5" } }

Any help would be greatly appreciated.

HalitTalha commented 3 years ago

Is your button, by any chance, inside an element with a structural directive?

snieves-mh commented 3 years ago

To be honest I'm not sure. My project is using this template: https://demos.creative-tim.com/material-dashboard-pro-angular2/#/dashboard.

Here is my html page:

<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-icon card-header-danger">
                        <div class="card-icon">
                            <i class="material-icons">grid_on</i>
                        </div>
                        <h4 class="card-title ">Lancaster Inventory</h4>
                    </div>
                    <div class="card-body">

                      <div class="row">
                        <div class="col-md-8">
                          <mat-form-field>
                            <input matInput [(ngModel)]="search" (keyup)="applyFilter()" placeholder="Search">
                          </mat-form-field>
                        </div>

                        <div class="col-md-2">
                          <button mat-raised-button type="button" class="btn btn-info btn-round" (click)="exportexcel()" >Export to Excel</button>
                        </div>
                      </div>

                      <div class="mat-elevation-z8">
                        <table mat-table [dataSource]="dataSource">

                        <!-- Facility Column -->
                        <ng-container matColumnDef="facility">
                          <th mat-header-cell *matHeaderCellDef> Facility </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_facility}} </td>
                        </ng-container>

                        <!-- Area Column -->
                        <ng-container matColumnDef="area">
                          <th mat-header-cell *matHeaderCellDef> Area </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_area}} </td>
                        </ng-container>

                        <!-- InvID Column -->
                        <ng-container matColumnDef="invid">
                            <th mat-header-cell *matHeaderCellDef> InvID </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_id}} </td>
                          </ng-container>

                        <!-- Waste Column -->
                        <ng-container matColumnDef="waste">
                          <th mat-header-cell *matHeaderCellDef> Waste </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_waste}} </td>
                        </ng-container>

                        <!-- Descriptor Column -->
                        <ng-container matColumnDef="descriptor">
                          <th mat-header-cell *matHeaderCellDef> Descriptor </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_descriptor}} </td>
                        </ng-container>

                        <!-- Net Column -->
                        <ng-container matColumnDef="weight">
                            <th mat-header-cell *matHeaderCellDef> Weight </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_net}} </td>
                          </ng-container>

                        <!-- Container Type Column -->
                        <ng-container matColumnDef="containertype">
                            <th mat-header-cell *matHeaderCellDef> Type </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_containertype}} </td>
                          </ng-container>

                        <!-- Container Size Column -->
                        <ng-container matColumnDef="containersize">
                            <th mat-header-cell *matHeaderCellDef> Size </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_containersize}} </td>
                          </ng-container>

                        <!-- Created Column -->
                        <ng-container matColumnDef="created">
                          <th mat-header-cell *matHeaderCellDef> Created </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_created | date:'MM/dd/yyyy'}} </td>
                        </ng-container>

                        <!-- V2ID Column -->
                        <ng-container matColumnDef="v2id">
                          <th mat-header-cell *matHeaderCellDef> V2ID </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_v2id }} </td>
                        </ng-container>

                        <!-- Edit Column -->
                        <ng-container matColumnDef="edit">
                          <th mat-header-cell *matHeaderCellDef> Edit </th>
                          <td mat-cell class="td-actions" *matCellDef="let element"> 
                            <a routerLink="/inventory/container" [state]="{ inv_id: element.inv_id }">
                              <button mat-raised-button type="button" class="btn btn-warning btn-sm {{element.inv_id}}">
                                  <i class="material-icons">edit</i>
                              </button>
                              </a>
                          </td>
                        </ng-container>

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

                        </table>
                        <mat-paginator [length]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
HalitTalha commented 3 years ago

The template you posted does not have a mat-table with matTableExporter directive. Something like this should work.

<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-icon card-header-danger">
                        <div class="card-icon">
                            <i class="material-icons">grid_on</i>
                        </div>
                        <h4 class="card-title ">Lancaster Inventory</h4>
                    </div>
                    <div class="card-body">

                      <div class="row">
                        <div class="col-md-8">
                          <mat-form-field>
                            <input matInput [(ngModel)]="search" (keyup)="applyFilter()" placeholder="Search">
                          </mat-form-field>
                        </div>

                        <div class="col-md-2">
                          <button mat-raised-button type="button" class="btn btn-info btn-round" (click)="exporter.exportTable('xlsx')" >Export to Excel</button>
                        </div>
                      </div>

                      <div class="mat-elevation-z8">
                        <table mat-table [dataSource]="dataSource" matTableExporter #exporter="matTableExporter">

                        <!-- Facility Column -->
                        <ng-container matColumnDef="facility">
                          <th mat-header-cell *matHeaderCellDef> Facility </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_facility}} </td>
                        </ng-container>

                        <!-- Area Column -->
                        <ng-container matColumnDef="area">
                          <th mat-header-cell *matHeaderCellDef> Area </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_area}} </td>
                        </ng-container>

                        <!-- InvID Column -->
                        <ng-container matColumnDef="invid">
                            <th mat-header-cell *matHeaderCellDef> InvID </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_id}} </td>
                          </ng-container>

                        <!-- Waste Column -->
                        <ng-container matColumnDef="waste">
                          <th mat-header-cell *matHeaderCellDef> Waste </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_waste}} </td>
                        </ng-container>

                        <!-- Descriptor Column -->
                        <ng-container matColumnDef="descriptor">
                          <th mat-header-cell *matHeaderCellDef> Descriptor </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_descriptor}} </td>
                        </ng-container>

                        <!-- Net Column -->
                        <ng-container matColumnDef="weight">
                            <th mat-header-cell *matHeaderCellDef> Weight </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_net}} </td>
                          </ng-container>

                        <!-- Container Type Column -->
                        <ng-container matColumnDef="containertype">
                            <th mat-header-cell *matHeaderCellDef> Type </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_containertype}} </td>
                          </ng-container>

                        <!-- Container Size Column -->
                        <ng-container matColumnDef="containersize">
                            <th mat-header-cell *matHeaderCellDef> Size </th>
                            <td mat-cell *matCellDef="let element"> {{element.inv_containersize}} </td>
                          </ng-container>

                        <!-- Created Column -->
                        <ng-container matColumnDef="created">
                          <th mat-header-cell *matHeaderCellDef> Created </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_created | date:'MM/dd/yyyy'}} </td>
                        </ng-container>

                        <!-- V2ID Column -->
                        <ng-container matColumnDef="v2id">
                          <th mat-header-cell *matHeaderCellDef> V2ID </th>
                          <td mat-cell *matCellDef="let element"> {{element.inv_v2id }} </td>
                        </ng-container>

                        <!-- Edit Column -->
                        <ng-container matColumnDef="edit">
                          <th mat-header-cell *matHeaderCellDef> Edit </th>
                          <td mat-cell class="td-actions" *matCellDef="let element"> 
                            <a routerLink="/inventory/container" [state]="{ inv_id: element.inv_id }">
                              <button mat-raised-button type="button" class="btn btn-warning btn-sm {{element.inv_id}}">
                                  <i class="material-icons">edit</i>
                              </button>
                              </a>
                          </td>
                        </ng-container>

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

                        </table>
                        <mat-paginator [length]="10" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
starscr3am77 commented 3 years ago

That worked, thank you!