title: Set value of input element from TypeScript
body: <p>In our Angular app, we are using a control from Telerik like:</p>
  
  <pre><code>&lt;kendo-recurrence-editor [start]="startDate" (valueChange)="onRecurrenceChange($event)"&gt;
  &lt;/kendo-recurrence-editor&gt;
  </code></pre>
  
  <p>Unfortunately <a href="https://www.telerik.com/kendo-angular-ui/components/scheduler/api/RecurrenceEditorComponent/" rel="nofollow noreferrer">they don't expose a lot of properties/events</a>, so there's no way of using the normal model binding. That's why we only can use the <code>valueChange</code> event.</p>
  
  <p>If someone changes a value of an input of this control, then the <code>onRecurrenceChange</code> function is called correctly:</p>
  
  <pre><code>public onRecurrenceChange(e) {
    this.recurrence = e;  
    ...     
  }
  </code></pre>
  
  <p>Now, the next thing we do is do validation of the input elements inside this control.</p>
  
  <p>If for example the value of an input is invalid, we reset the value of the input like:</p>
  
  <pre><code>public onRecurrenceChange(e) {
      ...
      var inputs = this.recurrenceEditorDiv.nativeElement.querySelectorAll("input");
      inputs[3].value = 1;
  }
  </code></pre>
  
  <p>The value is reset correctly, so functionally it seems to work, but at the same time we get a javascript error: <code>ExpressionChangedAfterItHasBeenCheckedError</code>.</p>
  
  <p>It seems the root cause is that we set this input value by manipulating the DOM ourselves in an event handler.</p>
  
  <p>I tried to do this in a <code>setTimeout()</code>, but this does not solve it. </p>
  
  <p>So my question is: in which way can we manipulate the DOM from TypeScript and change a value of an input element, and keep TypeScript happy?</p>
  
  <p>EDIT: I created a stackblitz, but here I don't see the exception that is thrown in Visual Studio: <a href="https://stackblitz.com/edit/angular-x1wpld" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-x1wpld</a>. If you go to DAILY, and type in 999 in 'after x occurences', it's reset to 1. But as said, in visual studio I get the <code>ExpressionChangedAfterItHasBeenCheckedError</code> error.</p>
  
  <p>EDIT 2: it seems to be solved by putting the full validation in a setTimeout, instead of only setting the value in a setTimeout.</p>