Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

After upgrade to Angular 6/Material 6 why am I facing 'mat-input-container is not a known element'?

Below code was running fine before I upgraded to 6. Not sure what changed in between! I have required modules imported as well

MatInputModule,
MatSelectModule,
MatFormFieldModule

  <mat-input-container>
    <mat-select placeholder="Sort By" formControlName="sortBy">
      <mat-option *ngFor="let sortByObject of sortByList" [value]="sortByObject.value">
        {{ sortByObject.label }}
      </mat-option>
    </mat-select>
  </mat-input-container>
like image 357
nsk Avatar asked May 20 '18 22:05

nsk


People also ask

How do I fix mat form field is not a known element?

error NG8001: 'mat-form-field' is not a known element: If 'mat-form-field' is an Angular component, then verify that it is part of this module. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule. schemas' of this component to suppress this message.

What is mat in angular material?

<mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.


1 Answers

This CSS class has been removed beginning version

6.0.0-beta.5 (2018-03-23)

mat-input-container has been deprecated, instead use mat-form-field

For details of breaking changes in 6.0.0-beta.5:

https://github.com/angular/material2/blob/master/CHANGELOG.md#600-beta5-2018-03-23

For details of breaking changes in general, refer:

https://github.com/angular/material2/blob/master/CHANGELOG.md

like image 110
Rizwan Avatar answered Oct 21 '22 13:10

Rizwan