title: Facing multiple error like 'mat-form-field' is not a known element and prevents the web page from loading
body: <p>I am new to angular and have been learning it for the past few days. </p>
  
  <p>The application contains the following:<br>
  App Module<br>
  ---Layout Module<br>
      ------ Customer Module (All Customer Component)<br>
      ------ Table Module</p>
  
  <p>The customer module and table module are feature modules.I have imported the html from table component and modified the details to suit the customer component. But I am facing multiple Error message when the page loads which I have attached at the end of this question. I am not sure why the mat-form-field or error such as datasource are causing error and I am not able to load the page. I am not sure why this error is occuring after its imported (MatFormFieldModule) in the CustomerModule.ts file. Please let me know what I am doing wrong ?</p>
  
  <p>Code for each module and other files</p>
  
  <p><strong>CustomerModule.ts:</strong></p>
  
  <pre><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { CustomerRoutingModule } from './customer-routing.module';
  import { EditCustomerComponent } from '../Customer/edit-customer/edit-customer.component';
  import { MatInputModule, MatTableModule, MatPaginatorModule, MatFormFieldModule } from '@angular/material';
  import { AllCustomerComponent } from '../Customer/all-customer/all-customer.component';
  
  @NgModule({
    declarations: [ EditCustomerComponent, AllCustomerComponent],
    imports: [
      CommonModule,
      CustomerRoutingModule,
      MatTableModule,
      MatFormFieldModule,
      MatPaginatorModule,
      MatInputModule
    ]
  })
  export class CustomerModule { }
  </code></pre>
  
  
  
  <p><strong>AllCustomerComponent.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
  import { Customer } from 'src/app/Models/customer';
  import { CustomerService } from '../Service/customer.service';
  
  @Component({
    selector: 'app-all-customer',
    templateUrl: './all-customer.component.html',
    styleUrls: ['./all-customer.component.scss']
  })
   export class AllCustomerComponent implements OnInit {
  
  displayedColumns = ['Id', 'CustomerName', 'CustomerEmailID', 'CustomerPhNo'];
  dataSource: MatTableDataSource&lt;Customer&gt;;
  public  customers: Customer[] = [];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  
  constructor(private customerService: CustomerService) {
      this.dataSource = new MatTableDataSource(this.customers);
  }
  
  ngOnInit() {
    this.customerService.getGetAllCustomers().subscribe(data =&gt; {
      this.dataSource = new MatTableDataSource(data);
    });
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
  }
  
  applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
      this.dataSource.filter = filterValue;
      if (this.dataSource.paginator) {
          this.dataSource.paginator.firstPage();
      }
  }
  }
  </code></pre>
  
  
  
  <p><strong>AllCustomerComponent.html</strong></p>
  
  <pre><code>&lt;mat-form-field&gt; 
  &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" /&gt; 
  &lt;/mat-form-field&gt;
  
  &lt;div class="mat-elevation-z8"&gt;
     &lt;table mat-table [dataSource]="dataSource" matSort&gt;
        &lt;ng-container matColumnDef="Id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;ID&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt;{{ row.Id }}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="FirstName"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt;{{ row.FirstName }}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="Email"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Email ID&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt;{{ row.Email }}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="PhoneNumber"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Phone Number&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt;{{ row.PhoneNumber }}&lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns"&gt;&lt;/tr&gt;
     &lt;/table&gt;
  
  &lt;mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CustomerService.ts</strong> </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpResponse, HttpErrorResponse } from 
  '@angular/common/http';
  import { Observable, throwError } from 'rxjs';
  import { catchError, retry, map } from 'rxjs/operators';
  import { environment } from 'src/environments/environment';
  import { HttpHeaderService } from 'src/app/Services/http-header.service';
  import { HandleError, HttpErrorHandlerService } from 'src/app/Services/http- 
  error-handler.service';
  
  @Injectable({
       providedIn: 'root'
      })
  export class CustomerService {
     private baseUrl: string = environment.baseUrl + 'Customer/';
     private handleError: HandleError;
  
   constructor(
      private http: HttpClient,
      private httpHeaderService: HttpHeaderService,
      private httpErrorHandlerService: HttpErrorHandlerService
      ) {
          this.handleError = 
          httpErrorHandlerService.createHandleError('customerService');
        }
  
      getGetAllCustomers(): Observable&lt;any&gt; {
          const url: string = this.baseUrl + 'GetAll';
          return this.http.get&lt;any&gt;(url, 
          this.httpHeaderService.getHttpHeader()).pipe(
          retry(environment.retryAttempt),
          catchError(this.handleError('getGetAllCustomers', 'Error'))
      );
      }
      }
  </code></pre>
  
  <p><strong>Full Error Message from browser:</strong></p>
  
  <pre><code>Uncaught Error: Template parse errors:
  'mat-form-field' is not a known element:
  1. If 'mat-form-field' is an Angular component, then verify that it is part 
  of this module.
  2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
  to the '@NgModule.schemas' of this component to suppress this message. (" 
  [ERROR -&gt;]&lt;mat-form-field&gt; 
  &lt;input matInput (keyup)="applyFilter($event.target.value)" 
  placeholder="Filter" /"): 
  ng:///CustomerRoutingModule/AllCustomerComponent.html@0:0
  Can't bind to 'dataSource' since it isn't a known property of 'table'. ("
  
  &lt;div class="mat-elevation-z8"&gt;
    &lt;table mat-table [ERROR -&gt;][dataSource]="dataSource" matSort&gt;
      &lt;ng-container matColumnDef="Id"&gt;
       &lt;th mat-header-cell *ma"): 
   ng:///CustomerRoutingModule/AllCustomerComponent.html@5:19
  Can't bind to 'matHeaderRowDef' since it isn't a known property of 'tr'. ("
  &lt;/ng-container&gt;
  
  &lt;tr mat-header-row [ERROR -&gt;]*matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
  &lt;tr mat-row *matRowDef="let row; columns: displayedColu"): ng:///CustomerRoutingModule/AllCustomerComponent.html@25:23
  Property binding matHeaderRowDef 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". ("
  &lt;/ng-container&gt;
  
  [ERROR -&gt;]&lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
  &lt;tr mat-row *matRowDef="let row; col"): ng:///CustomerRoutingModule/AllCustomerComponent.html@25:4
  Can't bind to 'matRowDefColumns' since it isn't a known property of 'tr'. ("
  
  &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
  &lt;tr mat-row [ERROR -&gt;]*matRowDef="let row; columns: displayedColumns"&gt;&lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>"): ng:///CustomerRoutingModule/AllCustomerComponent.html@26:16
  Property binding matRowDefColumns 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". ("
  
   &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
  [ERROR -&gt;]&lt;tr mat-row *matRowDef="let row; columns: displayedColumns"&gt;&lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> "): ng:///CustomerRoutingModule/AllCustomerComponent.html@26:4
   Can't bind to 'pageSize' since it isn't a known property of 'mat-paginator'.
   1. If 'mat-paginator' is an Angular component and it has 'pageSize' input, then verify that it is part of this module.
   2. If 'mat-paginator' 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. ("
   &lt;/table&gt;
  
    &lt;mat-paginator [ERROR -&gt;][pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
   &lt;/div&gt;
  "): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:17
  Can't bind to 'pageSizeOptions' since it isn't a known property of 'mat-paginator'.
  1. If 'mat-paginator' is an Angular component and it has 'pageSizeOptions' input, then verify that it is part of this module.
  2. If 'mat-paginator' 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. ("
  &lt;/table&gt;
  
  &lt;mat-paginator [pageSize]="10" [ERROR -&gt;][pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  "): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:33
  'mat-paginator' is not a known element:
  1. If 'mat-paginator' is an Angular component, then verify that it is part of this module.
  2. If 'mat-paginator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </code></pre>
  
  <p></p>
  
  <pre><code>[ERROR -&gt;]&lt;mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  "): ng:///CustomerRoutingModule/AllCustomerComponent.html@29:2
  at syntaxError (compiler.js:2427)
  at 
  </code></pre>