Angular2 DOMContentLoaded, Lifecycle Hook

Question

Im working with angular 2 (TS) and need some help:

     constructor(public element:ElementRef){}  
     ngOnInit(){
       this.DOMready()
     }  

     DOMready() {
       if (this.element) {
         let testPosition = this.element.nativeElement.getElementsByClassName("_mypost");
         console.log(testPosition);
         for (let i = 0; i < testPosition.length; i++) {
         console.log(testPosition[i]);
         }
     }else {
        setTimeout(this.DOMready, 100)
    }

My problem is:
1) I can't properly catch time when document loaded and was prepeared to work with it (this code is the best what i have and yes, i tryed angular2 lifecycle Hooks...)
2) console.log(testPosition) - give the list that i want (with length 10),
but if it change on console.log(testPosition[0]) it give undefined. And my console.log(testPosition[i]) print nothing.
Thx)

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

If you want to access the DOM you need to use

 ngAfterViewInit(){
   this.DOMready()
 }

or for projected content

 ngAfterContentInit(){ // or ngAfterContentChecked
   this.DOMready()
 }

There are better ways to access elements in your view.

See for example angular 2 / typescript : get hold of an element in the template

edited May 23 '17 at 11:46

Community

1
1

answered May 01 '16 at 16:00

Günter Zöchbauer

623,577
216
2,003
1,567

yep, i did it...but nothing changed at all ( – Buggy May 01 '16 at 16:25
Can you please provide more information about your use case? Have you tried the approach from the question I linked to in my answer? – Günter Zöchbauer May 01 '16 at 16:30
in .html, i dont have a 'child'...should i redo this? – Buggy May 01 '16 at 16:38
for (let i = 0; i < testPosition.length; i++) { console.log(testPosition[i]);} - from my code dont work. – Buggy May 01 '16 at 16:41
I still have not the slightest idea what problem you actually try to solve. – Günter Zöchbauer May 01 '16 at 16:44
It's actually SO as well :D http://stackoverflow.com/questions/36695468/angular-2-access-get-the-input-element-inside-an-ngfor-and-ngmodel – Günter Zöchbauer May 02 '16 at 02:47

Angular2 DOMContentLoaded, Lifecycle Hook

1 Answers1