title: Angular2+Typescript: how to manipulate DOM element?
body: <p>Update in 2017:
  ViewChild will be the best way to access Dom element.</p>
  
  <p>Question posted in 2016:</p>
  
  <p>I have tried the following two methods, only method 2 works. But I don't want the repeated code: document.getElementById() in each method. I prefer method 1, but why method 1 doesn't work?</p>
  
  <p>Are there any better ways to manipulate DOM in Angular2?</p>
  
  <p>.html file:</p>
  
  <pre><code>&lt;video id="movie" width="480px" autoplay&gt;
      &lt;source src="img/movie.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
  &lt;/video&gt;
  </code></pre>
  
  <p>Method 1:</p>
  
  <pre><code>...
  class AppComponent {
      videoElement = document.getElementById("movie");
  
      playVideo() {
          this.videoElement.play();
      }
  }
  </code></pre>
  
  <p>Method 2:</p>
  
  <pre><code>...
  class AppComponent {
  
      playVideo() {
          var videoElement = document.getElementById("movie");
          videoElement.play();
      }
  }
  </code></pre>