How to display a unit in an input field with Angular Material?

Question

I want to display a measurement unit inside an Angular Material input field. It should look like this:

How can I achieve this?

Answer 1

Use <span matSuffix>m²</span> like in the example below:

<mat-form-field appearance="outline">
  <mat-label>Room Size</mat-label>
  <input type="text" matInput />
  <span matSuffix>m²</span>
</mat-form-field>

See documentation .