Angular mat form field appearance

Question

How do I implement this in Angular 12?

below is the code in my html:

<mat-form-field style="width: 70px;"
  [appearance]="somevariable ? 'none' : 'legacy'"
>
  <input matInput type="text" formControlName="name" 
    [readonly]="VOForm.get('VORows').value[i].isEditable" 
  />
</mat-form-field>

Here the appearance attribute doesn't take the value "none" since "strictTemplates": true under angularCompilerOptions.

What is the workaround, I still want to use Mat-form-field ?

My use case is , when somevariable is true no appearance need to be applied but if the value is false then legacy appearance is applied.

Answer 1

If you use the following class :

::ng-deep .mat-form-field-underline{
   display: none;}

The underline is always going to be hidden but you can apply this style conditionnaly with the use of ngClass. So in the template you have :

<mat-form-field [ngClass]="{'nameOfYourClass': expression">
</mat-form-field>

Where 'expression' is any expression returning a boolean.

And in the css :

::ng-deep .nameOfYourClass .mat-form-field-underline: {
   display: none;}

Had the same problem and it works for me! I hope it will work for you as well, Cheers