Ionic 2 document.getElementById returns null

ionic2, typescript

Solution

If you are trying to get the element base on the id, you could use angular's `viewChild` instead of using javascript.

To do this I would write the code like this.

In your map.html

<ion-content >
  <div #myMap></div>
</ion-content>

In your map.ts

make sure you import ViewChild from @angular/core

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

...

export class MapPage {
  @ViewChild('myMap') myMap ;

  constructor(public viewCtrl: ViewController, params: NavParams) {
    console.log(this.myMap); //visit your element by using this.myMap
  }

}

Problem

I am creating a small app with Ionic 2. Now I am testing it in browser with ionic serve. In my `map.html` file, I have following code: ``` <ion-content > <div id="myMap"></div> </ion-content> ``` In my `map.ts` file, I tried to do this: ``` this.platform.ready().then((readySource) => { console.log('Platform ready from', readySource); console.log(document.getElementById('myMap')); //this.initializeMap(); }); ``` The console outputs: ` Platform ready from dom null ` Scratch my head a lot but still can't find why it can't locate that element. Any help would be appreciated!

Original source