'mat-footer-cell' is not a known element

Question

I want to try adding a footer to the mat-table , but the error after that is being shown...

webpack-internal:///../../../compiler/esm5/compiler.js:24547 Uncaught Error: Template parse errors:
'mat-footer-cell' is not a known element:
1. If 'mat-footer-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-footer-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (")">
                                {{element[columnName]}} </mat-cell>
                            [ERROR ->]<mat-footer-cell *matFooterCellDef>{{element[columnName]}}</mat-footer-cell>
                        "): ng:///AppModule/TestComponent.html@99:28
'mat-footer-row' is not a known element:
1. If 'mat-footer-row' is an Angular component, then verify that it is part of this module.
2. If 'mat-footer-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                        [ERROR ->]<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
                    </mat-table"): ng:///AppModule/TestComponent.html@104:24
Can't bind to 'matFooterRowDef' since it isn't a known property of 'mat-footer-row'.
1. If 'mat-footer-row' is an Angular component and it has 'matFooterRowDef' input, then verify that it is part of this module.
2. If 'mat-footer-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("*matRowDef="let row; columns: displayedColumns;"></mat-row>
                        <mat-footer-row [ERROR ->]*matFooterRowDef="displayedColumns"></mat-footer-row>
                    </mat-table>

"): ng:///AppModule/TestComponent.html@104:40
Property binding matFooterRowDef not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                        [ERROR ->]<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
                    </mat-table"): ng:///AppModule/TestComponent.html@104:24
    at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:684)
    at TemplateParser.parse (webpack-internal:///../../../compiler/esm5/compiler.js:24547)
    at JitCompiler._parseTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33934)
    at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33909)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33811)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33811)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33681)
    at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:673)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33680)

I saw a footer example of Angular material official example

But I want to do something different with the dynamic column in the code below, but I mentioned above its error...

<mat-table #table [dataSource]="transactions" matSort class="mat-elevation-z8">
    <ng-container [matColumnDef]="columnName" *ngFor="let columnName of displayedColumns;let i = index">
        <mat-header-cell mat-sort-header *matHeaderCellDef> {{displayedColumns[i]}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row[columnName]}} </mat-cell>
        <mat-footer-cell *matFooterCellDef>
      {{columnName === 'item' ? 'Total': getTotalCost()}}
    </mat-footer-cell>
    </ng-container>

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

I am using Angular 7 and i had installed all material modules. Without footer mat-table working fine. Angular material dependancies as following..

"@angular/material": "^5.0.0-rc.1"

Please help!

Thanks:)

Answer 1

Did you add import {MatTableModule} from '@angular/material/table' to the imports in the module where the component is declared?