Angular mat-form-field how to set width:100%

This works just fine.

mat-form-field {
  width: 100%;
}

Live demo

You can do something like this also.

  <mat-form-field [style.width.%]="100"></mat-form-field>

And this would also help to conditionally set a style value depending on a property of the component.

 <mat-form-field [style.width.%]="fullWidth? '100' : '50'"></mat-form-field>

While mat-form-field selector is valid and it works just fine, SonarQube and other code quality tools will issue a warning on custom selectors.

My suggestion is to hook the form fields by its class name instead of component tag

.mat-form-field{ width: 100%; }

Related