title: How to make mat-label float to the right (RTL language) when input value is LTR in Angular Material
body: <p>I have a <code>mat-form-field</code> with <code>appearance=&quot;outline&quot;</code>.</p>
  <p>As it's input with the type of number I want the input value to be LTR; always.</p>
  <p>But <code>mat-label</code> is in Persian (an RTL language) so I want it to float to the right.</p>
  <p>As you can see in the image below, right now input value is LTR and the cursor is at the left side (which is correct) but the label is also floating to the left (which is not what I want).</p>
  <p><a href="https://i.stack.imgur.com/B7d1t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B7d1t.png" alt="mat-input with its label floating to the left" /></a></p>
  <p>How can I achieve this?</p>
  <p>Here's my <code>HTML</code>:</p>
  <pre><code>          &lt;mat-form-field
              appearance=&quot;outline&quot;
              class=&quot;ltr__mat-form-field&quot;
            &gt;
              &lt;mat-label&gt;مقدار&lt;/mat-label&gt;
              &lt;input
                type=&quot;text&quot;
                name=&quot;code&quot;
                matInput
                required
              /&gt;
            &lt;/mat-form-field&gt;
  </code></pre>
  <p>And this is my <code>CSS</code>:</p>
  <pre><code>.ltr__mat-form-field {
      ::ng-deep .mat-form-field-wrapper,
      .mat-form-field-wrapper {
        ::ng-deep .mat-form-field-infix {
          text-align: left;
          direction: ltr;
  
            ::placeholder {
              text-align: right;
            }
        }
      }
    }
  </code></pre>