title: How to add letter-spacing to input value but not to input placeholder (Angular 11)
body: <p>I have a <code>mat-form-field</code> in my Angular project in which I need to add letter-spacing to the input value but not the input placeholder.</p>
  <p>Currently, my input looks like this:</p>
  <p><a href="https://i.stack.imgur.com/oS6FZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oS6FZ.png" alt="mat-form-field input placeholder" /></a></p>
  <p>And when user types something in the input, it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/HoUE9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HoUE9.png" alt="mat-form-field input value" /></a></p>
  <p>What I want, is for the input placeholder to look like this (without any letter spacing), but keep input value's letter spacing at the same time:</p>
  <p><a href="https://i.stack.imgur.com/GOEKk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GOEKk.png" alt="mat-form-field input placeholder" /></a></p>
  <p>Is there any possible way to do this?</p>
  <p>This is my <code>HTML</code>:</p>
  <pre><code>    &lt;mat-form-field
        id=&quot;mobileNumber&quot;
        appearance=&quot;outline&quot;
      &gt;
        &lt;span matSuffix&gt;+98&lt;/span&gt;
        &lt;input
          type=&quot;text&quot;
          matInput
          name=&quot;mobileNumber&quot;
          formControlName=&quot;mobileNumber&quot;
          placeholder=&quot;Mobile Number&quot;
        /&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  <p>And this is my <code>SCSS</code>:</p>
  <pre><code>     mat-form-field#mobileNumber {
          width: 70%;
  
          ::ng-deep .mat-form-field-wrapper,
          .mat-form-field-wrapper {
            ::ng-deep .mat-form-field-infix {
              direction: ltr;
              text-align: center;
  
              ::ng-deep input {
                letter-spacing: 8px;
              }
            }
          }
        }
  </code></pre>