title: Custom Angular Input Mask
body: <p>I do have an <strong>input field</strong> which is populated with <em>JSON</em> object data.</p>
  
  <pre><code> dimension: {
     length: 10.00,
     width: 20.00,
     height: 30.00,
   }
  </code></pre>
  
  <p>The input looks like this:</p>
  
  <pre><code> &lt;input matInput [placeholder]="Dimension (LxHxW)" formControlName="dimensions" 
          name="dimensions" mask="00.0x00.0x00.0" [specialCharacters]="['x', '.']" 
          [clearIfNotMatch]="true" [showMaskTyped]="true"
    /&gt;
  </code></pre>
  
  <p>where dimensions is built in typescript code as:</p>
  
  <pre><code> let dimensions = null;
      if (dimensionObject) {
        dimensions = '' + dimensionObject.length + 'x' + dimensionObject.width + 'x'
          + dimensionObject.height;
      }
  </code></pre>
  
  <blockquote>
    <p>The goal is to map correctly the data on the mask  and obtain the
    length, width and height concatenated with an x in between-> <strong>obtain
    a flexible mask</strong>.</p>
  </blockquote>
  
  <p>The problem appears when dimensions values are of different length: </p>
  
  <p><em>e.g.</em> if dimension is 2.3 x 12.3 x 42.2 instead of 2.3 x 12.3 x 42.2 it will show 23.1 x 23.4 x 22. ( x shifted).</p>
  
  <p>Any solutions you guys can spot?</p>