5

I have been playing with A2 for a little while now and I understand that my problem is due to the sequence in which everything initialises and runs within A2 and due to the *ngIf in the html but what I don't understand is why or how to get my desired result.

Using the following test component:

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.component.html' })

export class TestComponent implements OnInit {
    test: any;

    settest():void{ 
        //this.test = {test: 1}; --This works using ngAfterViewInit

        //This causes the console.log in ngAfterViewInit to be null
        this.route.params
            .switchMap((params: Params) => this.testService.getTest(params['id']))
            .subscribe(test => {
                this.test = test;
        });
    }

    ngOnInit(): void
    {
        this.settest();
        console.log(document.getElementById('test1')); --Null
        console.log(document.getElementById('test2')); -- Not NUll
    } 

    ngAfterViewInit(): void
    {
        console.log(document.getElementById('test1')); --Null
        console.log(document.getElementById('test2')); -- Not NUll
    } 
}

and test.component.html

<div *ngIf="test">
    <div id="test1"></div>
</div>
<div id="test2"></div>

What I don't understand is why, even in the ngOnInit the console.log of test1 returns null where as test2 returns the element. I know it is because its within the *ngIf, but I don't understand why or what to do to access that element once its rendered so I can interact with it as part of the google maps API

EDIT Updated some code that I'd foolishly excluded.

Doug
  • 547
  • 10
  • 23

1 Answers1

5

You can refer to a DOM element in ngAfterViewInit life cycle hook if you are using any angular context on that element. You can expect DOM element(with Angular context) to be fully available in ngAfterViewInit life cycle hook.

ngOnInit(): void
{
    this.settest();
    console.log(document.getElementById('test1'));   // not rendered
    console.log(document.getElementById('test2'));
} 


ngAfterViewInit(){
   console.log(document.getElementById('test1'));    // rendered
}
micronyks
  • 54,797
  • 15
  • 112
  • 146
  • Still returns NULL, even in the `ngAfterViewInit`. Playing more with the code, as best I can tell its because of the async of the api call (which I'll update my answer with as I stupidly excluded it). If I remove the async call then `ngAfterViewInit()` works, if I keep `subscribe` then it doesn't. – Doug Feb 07 '17 at 08:22