title: How to get access to an HTML video element in Angular2
body: <p>I have an HTML5 <code>&lt;video&gt;</code> element in an Angular2 component. I need access to it in order to check the duration before allowing the user to share it to Twitter.</p>
  
  <p>Is there any way through model binding, or direct access to the DOM, that I can get this information in the component's backing class?</p>
  
  <p>I've tried binding it using ng-model, like this in the component's template:</p>
  
  <pre><code>&lt;video controls width="250" [(ng-model)]="videoElement"&gt;
      &lt;source [src]="video" type="video/mp4" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>and in the component's class (TypeScript):</p>
  
  <pre><code>videoElement: HTMLVideoElement;
  </code></pre>
  
  <p>That gives me this error: <code>EXCEPTION: No value accessor for '' in [null]</code></p>
  
  <p>I was able to access it by just giving the video element an id and using <code>document.getElementById("videoElementId")</code> but it seems like there must be a better way.</p>