Angular2+Typescript: how to manipulate DOM element?
<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>