Angular 5 material design full-width inputs

On all of your mat-form-field, you will need to add a class which you can call what you want but I’ll call it full-width-field so, in the end, it will look like this.


<mat-form-field class="full-width-field">
  <input matInput type="number" min="1" placeholder="Age">


.full-width-field {
   width: 100%;

Example take from Angular Material Docs

You have to apply your custom style to make all mat-form-field to full-width:

    width: 100%;

Automatically all material input elements inside it will have full-width