title: Angular input time mask
body: <p>
  I have this input (Material 2) in reactive forms. And I know the better way to put a time mask (hh:mm) on this input. Or how can I build a directive for that?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-md-2 hours"&gt;
    &lt;label for="floating-placeholder"&gt;Horário&lt;/label&gt;
    &lt;div&gt;
      &lt;input class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end" minlength="4" maxlength="4" formControlName="start"&gt;
      às
      &lt;input class="col-md-5 end" matInput placeholder="hh:mm" value=""  name="end" formControlName="end"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>