angular, can't find element in html

Question

For some reason I can't get the value of the list element in the html despite using document.getElementByID and it has the same id. It claims that the element is undefined. Here is the code:

fileupload.component.ts:

ngOnInit() {  
  var x = document.getElementById('lemons'); 
  if(x){
    console.log('it does exits')
    x.addEventListener('click', function(e:any){
      console.log(x.innerHTML);
    });
  }
}

fileupload.component.html:

<div class="row" id="filesDisplay">
<div class="col-md-4" id="files">
    <li *ngFor="let child of tree" id="lemons">
            {{child}}
    </li>
</div>

You could consider using template-variable with ViewChildren, bind click listner directly using (click)="myEvent($event)" — Pankaj Parkar
– Pankaj Parkar, Commented Jan 25, 2018 at 11:44
Your template is incorrect: each <li> element (representing a separate element of tree list) has the same id - 'lemons'. — raina77ow
– raina77ow, Commented Jan 25, 2018 at 11:49

axl-code · Accepted Answer · 2018-01-25 11:48:07Z

3

The *ngFor directive is processed after the OnInit hook, so if you want to get an element generated with the *ngFor you should use:

ngAfterViewInit() { }

Also you are duplicating the id, this means it only will select the first element.

lifecycle-hooks angular's guide

Edit: added angular guide

answered Jan 25, 2018 at 11:48

axl-code

2,3241 gold badge17 silver badges25 bronze badges

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

2 Comments

help please Over a year ago

This worked to register clicks but only prints the first element.

axl-code Over a year ago

Yes because you are using the same id for all the <li> elements. So when you are printing the <li> innerHTML it only has the first one.

Pramod Patil · Accepted Answer · 2018-01-25 12:04:00Z

2

You can not repeat same html id for all the li's. You need to add index to id to diffrentiate.

 <div class="row" id="filesDisplay">
  <div class="col-md-4" id="files">
   <li *ngFor="let child of tree" (click)="test(child)">
        {{child}}
   </li>
</div>

and in javascript you need to pull the id accordingly.

  ngOnInit() {  
   test(res) {
     // perform your logic here..
    } 
}

You no need to use jquery here where angular is providing all your need in DOM manipulation.

edited Jan 25, 2018 at 12:04

answered Jan 25, 2018 at 11:56

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

2 Comments

help please Over a year ago

what would I do if i wanted the item that they clicked on

help please Over a year ago

This worked perfectly, however I didn't put it in the ngOnInit. I put it on the outside instead.

Collectives™ on Stack Overflow

angular, can't find element in html

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related