Angular2+Typescript: how to manipulate DOM element?

Question

Update in 2017: ViewChild will be the best way to access Dom element.

Question posted in 2016:

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?

Are there any better ways to manipulate DOM in Angular2?

.html file:

<video id="movie" width="480px" autoplay>
    <source src="img/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Method 1:

...
class AppComponent {
    videoElement = document.getElementById("movie");

    playVideo() {
        this.videoElement.play();
    }
}

Method 2:

...
class AppComponent {

    playVideo() {
        var videoElement = document.getElementById("movie");
        videoElement.play();
    }
}

what you want to ask ? post some more code or plunkr if possible. seems both the methods you post did the same is't it ? — Pardeep Jain
– Pardeep Jain, Commented Mar 4, 2016 at 17:58
I know it looks like same for variables, but actually for DOM element, there is difference between declaring a DOM element variable inside method and outside method. It seems very weird, but I get this conclusion after the first method failed. — Ng2-Fun
– Ng2-Fun, Commented Mar 4, 2016 at 18:30
whats the conclusions you got ? is there any major difference between these two ? if yes provide as answer may be helpful to others. — Pardeep Jain
– Pardeep Jain, Commented Mar 4, 2016 at 18:32

mahdi kallel · Accepted Answer · 2017-03-09 17:18:36Z

11

<div #itemId>{{ (items()) }}</div>

You can access the Element via ViewChild:

import {ViewChild} from '@angular/core';

    @ViewChild('itemId') itemId; 

    ngAfterViewInit() {
      console.log(this.itemId.nativeElement.value);
    }

answered Mar 9, 2017 at 17:18

mahdi kallel

4531 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pardeep Jain · Accepted Answer · 2016-03-04 18:47:42Z

-1

According to your question you want to use some common portion of code into multiple methods. but you got unsuccessful. just declare one single variable and assign some values to that variable then you will be able to use that variable into multiple methods like this or we can say bind this variable value with two way data binding of angular using [(ngModel)]:

   class A {
       abc:string = null;
       abc2:string = null;

       abcFun(){
         console.log(this.abc)
        }

       bcdFun(){
         console.log(this.abc)
        } 

        // second method using javascript as your way
          abcFun2(){
            this.abc2 = document.getElementById('abc2').value;
            console.log(this.abc2);
          }
          bcdFun2(){
           console.log(this.abc2);
          }  
    }

<input type="text" id="abc" [(ngModel)]="abc"> {{abc}}

<button (click)="abcFun()">ABC FUN</button>
<button (click)="bcdFun()">BCD FUN</button>


<input type="text" id="abc2"> {{abc2}}

<button (click)="abcFun2()">ABC FUN</button>
<button (click)="bcdFun2()">BCD FUN</button>

here is working demo for the same http://plnkr.co/edit/Y80SsPCUTx1UP5tYksIy?p=preview

edited Mar 4, 2016 at 18:47

answered Mar 4, 2016 at 18:14

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

4 Comments

Ng2-Fun Over a year ago

I have tried your code above, it doesn't work either. Have you ever test it?

Pardeep Jain Over a year ago

please see now the working demo attached to link. you can use two way data binding too.

Ng2-Fun Over a year ago

Thanks for your help. Sorry I had problem to create an angular2 application on Plunker and can't edit your code on Plunker. But I have updated the code above. You misunderstood my question. My question is all about manipulating the DOM through document.getElementById(). Because I want to play/pause video, I have to get the element. The thing is if I defined videoElement variable outside of methods is different from defined inside method. The first method will get an error, we can't access DOM element when it is defined outside of method. Can you grant me the right to edit your plunker?

Ng2-Fun Over a year ago

oops, I can't find any mp4 placeholder to show a video. And this plunker is not editable for me.

Collectives™ on Stack Overflow

Angular2+Typescript: how to manipulate DOM element?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related