Why does putting code inside a setTimeout make Angular work properly?

Question

I've been trying to create a simple directive in Angular 5 but hit walls. I recently discovered that adding my code inside a setTimeout function makes it work as I expect. In this case I expect the form to appear populated with "yolo"

I don't completely understand why. I understand that it has to do with the way Angular bootstraps but I don't understand why it is that way - and especially why code in the constructor is discarded (After all, then what's the point of the constructor?)

Please find a simplified copy of the code in question below:

With setTimeout

Without setTimeout

@Directive({
  selector: '[formControlName][phone]',
  host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class PhoneMask {

  constructor(public model: NgControl) {
    // with setTimeout
    setTimeout(() => {  
      this.model.valueAccessor.writeValue('yolo');
    });

    // without setTimeout
    // this.model.valueAccessor.writeValue('yolo');

  }

}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <form [formGroup]="form">
    <input type="text" phone formControlName="phone"> 
  </form>
  `,
  directives: [PhoneMask]
})
export class App {
  constructor(fb:FormBuilder) {
    this.form=fb.group({
      phone:['']
    })
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App, PhoneMask ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

When you put code in a setTimeout you are effectively taking it out of the current call stack, once the whole call stack is executed the event loop will pick your code and put it on top of a new call stack and the execution will start. You may come around the term tick, well thats a tick, when the call stack is done. In your case, setTimeout is basically 0ms but the code is removed from the current stack, so everything else completes, then your code runs, modifies the property and angular change detector detects the change.

Answer 2

At the time of constructing your directive, Angular doesn’t check for changes in the directive’s (or rather its host component’s) properties. While moving the relevant code to setTimeout works, it’s much better (ie. not a hacky workaround) to do such things in eg. ngOnInit:

// PhoneMask implements OnInit
ngOnInit() {
  this.model.valueAccessor.writeValue('yolo')
}

Worth reading: https://stackoverflow.com/a/35763811/7178441

---

Update: @csmckelvey explained in comments why the setTimeout trick actually works:

Because it causes the code to be delayed until after the constructor has been executed.