[Angular] Why create local variables in templates?

I'm a newbie trying to pick up some angular when I came across this strange bit of code.

<video #movieplayer ...>
    <button (click)="movieplayer.play()">
</video>

When / why would I create a local variable (movieplayer) in the .html file rather than its .ts?

Comments

[Guilherme Medeiros]

Most cases it would be for simplicity.

In the scenario you are showcasing, it is easier to do everything with the HTML.

To do the same thing with the TS files, you would need to use ViewChield to "find" the rendered component. Then you can create a function to interact with it or use it directly on your HTML.

With HTML, the variables point directly to the rendered object (a mix of dom and angular). So it is easier to interact with it.

It is a matter of choice/taste. What ever you and your team likes and think is better for your project.

[Joel Lau]

thanks @guilherme ! you explained that perfectly