DEV Community

Joel Lau
Joel Lau

Posted on

[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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
frenetic profile image
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.

Collapse
 
joellau profile image
Joel Lau

thanks @guilherme ! you explained that perfectly