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.

HTML:

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

CSS:

.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:

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

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