title: Mask directive in Angular 2 not working on load view
body: <p>I made some mask directives in Angular 2, one of them is for zip code. It mostly works but when loading the data in HTML, it only works when the focus is on the input that has the directive. I've tried putting various events in host, but none worked. I tried to use change, input, but none worked.</p>
  
  <p><strong>HTML:</strong></p>
  
  <p><em>input has the directive (directive name: cep)</em></p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
          &lt;div class="form-group fg-line"&gt;
              &lt;label for="cep"&gt;CEP&lt;/label&gt;
              &lt;input type="text" class="form-control input-sm" id="cep" placeholder="CEP" required [(ngModel)]="empresa.Cep" borda-animada
                  cep maxlength="9" ngControl="cep" #cep="ngForm"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directive:</strong></p>
  
  <pre><code>import {Directive} from '@angular/core';
  import {NgModel} from '@angular/common';
  import {Mascaras} from '../core/mascaras'
  
  @Directive({
      selector: '[ngModel][cep]',
      providers: [NgModel],
      host: {
          '(blur)': 'onInputChange($event)',
          '(input)': 'onInputChange($event)'
      }
  })
  export class CepDirective {
      modelValue: string;
      viewValue: string;
  
  constructor(public model: NgModel) {}
  
  onInputChange(event) {
    console.log('teste ngmodelchange');
  
    //event é o evento html que é disparado no evento blur
    //por isso precisa pegar o target.value.
    var newValue = Mascaras.cep(event.target.value);
    this.model.valueAccessor.writeValue(newValue);       
    }
  }
  </code></pre>