Cannot load DOM element in child component

Question

I have found a problem with Angular 4.4.6 when accessing an DOM element by ID from a different component.

In my component, I want to draw a Google Maps for certain uses. As indicated in the examples provided in the API, I do this by including the following in the .html file:

<div id='map'></div>

In the .ts file, I have the following in my ngOnInit function:

...
var map = new google.maps.Map(document.getElementById('map'), {
   ...
}
...

This works as expected, and shows a map I can use if I load the component directly as specified in the routing component.

However, if I want to use this component from a different one, as seen next:

<my-selector></my-selector>

I get the following error in the line where I initialize the map.

ERROR TypeError: Cannot read property 'firstChild' of null

Am I missing something? I suspect it has to do with the loading order, but I cannot understand why it works in one case, and not the other.

Can you please add your actual code? I don't think that the error displayed is caused by the few lines you posted — fjc, Jan 16 '18 at 18:44
which aprt of the code could be useful? the child code? the parent one? — Daniel Ortiz, Jan 16 '18 at 20:20

score 1 · Answer 1 · answered Jan 26 '18 at 19:56

The problem was the component with the map was called inside a Terdata Covalent stepper, that for some reason was meessing with the load order.

We switched to the materials 2 for angular matStepper and faced the same problem that was solved by initializing the map in the AfterViewInit and not on OnInit.

The AfterViewInit did not work on the Covaled stepper.

Cannot load DOM element in child component

1 Answers1