title: Angular 4 - how to render 2 decimal places for type='input'
body: <p><a href="https://stackoverflow.com/questions/34057595/allow-2-decimal-places-in-input-type-number">This question</a> is about restricting/validating the input when the user enters data into an input of type number.</p>
  
  <p>The issue I have is that when the model first loads, any numbers that are integers or 1dp, get rendered with only 1dp. eg 40 or 40.0 both show as 40.0 (not as 40.00).</p>
  
  <p>I have added this code so that after a user types a new value, it shows with 2dp:</p>
  
  <p>in the template file:</p>
  
  <pre><code>(change)="setTwoNumberDecimal($event)"
  </code></pre>
  
  <p>in the component file:</p>
  
  <pre><code>  setTwoNumberDecimal($event) {
      $event.target.value = parseFloat($event.target.value).toFixed(2);
    }
  </code></pre>
  
  <p>This works to show 2dp <strong>after</strong> the user changes the value.</p>
  
  <p>I tried to write a directive that should format to 2dp when the data initially loads, but although the directive does fire, it does not change the value to 2dp.</p>
  
  <pre><code>import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
  
  @Directive ({
    selector: '[fbDecimalFormat]'
  })
  
  export class DecimalFormatDirective {
  
    constructor(private el: ElementRef,
                private renderer: Renderer2) {
      //renderer.setAttribute(el, 'value', parseFloat(el.nativeElement.value).toFixed(2));
      this.el.nativeElement.value = parseFloat(this.el.nativeElement.value).toFixed(2);
    }
  
  }
  </code></pre>
  
  <p>FYI the commented render line did not work (error: setAttribute not recognised) - it was an attempt to be platform independent.</p>
  
  <p>So the question is:
  How can I get the input to render its initial value with 2dps?</p>