Ionic 2 getElementById function failing to retrieve element

I've been working on a mini app using Ionic 2 and testing it in the browser with ionic serve. Inside my map.html file, I have the following code snippet:

<ion-content >
   <div  id="myMap"></div>
</ion-content>

In my map.ts file, I attempted to access this element like so:

this.platform.ready().then((readySource) => {
console.log('Platform ready from', readySource);
console.log(document.getElementById('myMap'));
//this.initializeMap();
});

But when I check the console, it shows:

Platform ready from dom null

I'm scratching my head trying to figure out why it can't locate that element.

If anyone could offer some assistance, it would be greatly appreciated!

typescriptionic2

Answer №1

If you need to retrieve an element based on its ID, consider using Angular's ViewChild instead of traditional JavaScript methods.

Here is an example of how you can achieve this:

In your template file (map.html):

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

In your component file (map.ts):

Make sure to 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); // Access the element using this.myMap
  }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the solution for adjusting the dynamic routing in React using React Router v5 to redirect from /pageName to /my/pageName?

I find myself in a bit of a dilemma. Currently, I am utilizing React Router v5 for my website. Previously, my page links were structured as /pageName. However, in light of some new features, I have modified the links to be /:userId/pageName where userId c ...

reactjstypescriptreact-router

What sets apart the Partial and Optional operators in Typescript?

interface I1 { x: number; y: string; } interface I2 { x?: number; y?: string; } const tmp1: Partial<I1> = {}, tmp2: I2 = {}; Can you spot a clear distinction between these two entities, as demonstrated in the above code snippet? ...

typescript

JavaScript function that holds two arguments

I'm in the process of adapting these Redux actions to Vuex. Upon examination, I noticed that the actions have 2 placeholders(I'm unsure of the correct term) for arguments. For illustration purposes, it looks something like this: export const ...

typescriptvuexvuejs3vue-composition-api

Managing middleware in tRPC: Utilizing multiple methods for a single route call?

We're currently working on a group project with a tight deadline of just a few weeks. Our team has opted to utilize the T-3 stack for this project and have chosen tRPC as the server framework. While I am familiar with express, I am finding it challeng ...

reactjstypescriptexpressmiddlewaretrpc

Transforming an established Angular application into a Progressive Web App

What steps do I need to take in my command line to transform my Angular project into a progressive web app (PWA) similar to react-pwa? ...

javascriptangulartypescriptprogressive-web-apps

Utilizing the power of TypeScript in React to ensure components only return a specific type of component

Imagine you have a component named <Banner />: function Banner({ message }: { message: string; }) { return <div>{message}</div>; } Now, suppose you want to create components called <SuccessBanner /> and <ErrorBanner />: fun ...

reactjstypescriptreact-typescript

Encountering an issue while setting up a dynamic form using Angular 17

I am in the process of developing a dynamic form that consists of an array of payments. Users will have the ability to add new payments, delete existing ones from the array, and make edits. Here is a snippet of the HTML code I am using: <form [formGrou ...

angulartypescriptangular-reactive-formsformarrayangular17

What is the process for creating a method within a class?

Here is the current structure of my class: export class Patient { constructor(public id: number, public name: string, public location: string, public bedId: number, public severity: string, public trajectory: number, public vitalSigns: ...

angulartypescript

A guide to effectively converting and parsing a class object that includes Uint8Array elements

After stringifying a class object that contains a property in Uint8Array, and then parsing it later, the property is no longer in Uint8Array format. Here's an example: class Example { title:string; byteData:Uint8Array; ...

javascripttypescript

Enter all instances of the class/interface/type into the text field

If I define a type like this: type MyType = { ... propertyA: string; propertyB: number; ... } is there a way to create another type that includes MyType but allows for versions of it with omitted properties? For example: type MyOtherType = ...

javascripttypescripttypes

Why isn't Nodemon monitoring the directory in webpack-typescript-node.js?

Here are the contents of the package.json file for a TypeScript project using webpack and node.js: "scripts": { "build": "webpack", "dev:start": "nodemon --watch src --exec \"node -r dotenv/co ...

node.jstypescriptwebpacknodemon

Using TypeScript with Visual Studio Code to reference a renamed file

I recently changed the name of a file from FooBar.ts to fooBar.ts. Despite updating the file name, VS Code continues to refer back to the old file. In order to resolve this issue, I disabled forceConsistentCasingInFileNames in the tsconfig.json file. Howev ...

typescriptvisual-studio-code

Best practices for implementing the map function with TypeScript

I'm currently working on mapping types in a DB using the Map function in JavaScript. This is my first time trying to do this, and I'm eager to learn but I've hit a roadblock. Here is the structure of the DB: const db = { data: [ { ...

javascriptreactjstypescripttypes

Can NODE_PATH be configured in Typescript?

Before, I worked on my React app with ES6 and used NODE_PATH='src' to import files starting from the src folder. However, since switching to Typescript, I've realized that NODE_PATH is not supported. After some investigation, I discovered th ...

typescript

Contrasting importing CSS directly in index.html versus using styleUrls in Angular 5

My landing page and dashboard components have different CSS styling, causing one of them to not function properly depending on the CSS. I tried removing these two lines from index.html: <link href="./assets/css/bootstrap.min.css" rel="stylesheet" /&g ...

cssangulartypescriptbootstrap-4angular5

A static method written in Typescript within an abstract class for generating a new instance of the class itself

Imagine I have abstract class Foo { } class Bar1 extends Foo { constructor(someVar) { ... } } class Bar2 extends Foo { constructor(someVar) { ... } } I want to create a static method that generates an instance of the final class (all construct ...

javascripttypescript

What is the best way to package a UI library in a monorepo?

After dedicating a significant amount of time to unraveling this issue, I find myself at a standstill. Incorporating Turbo as a monorepo, I utilized the create-turbo@latest command, outlined in detail here. While the default ui/package functions properly ...

javascripttypescriptnpmnext.jsturborepo

How can I access the most up-to-date state value in an event listener within a React element?

Here is the code I am working with: var C = () => { var [s, setS] = useState(0) var dRef = useRef<HTMLDivElement>() useMount(() => { setShortcut("ArrowDown", () => { setS(s+1) }) }) return ...

javascriptreactjstypescript

Mapping a response object to a Type interface with multiple Type Interfaces in Angular 7: A step-by-step guide

Here is the interface structure I am working with: export interface ObjLookup { owner?: IObjOwner; contacts?: IOwnerContacts[]; location?: IOwnerLocation; } This includes the following interfaces as well: export interface IObjOwner { las ...

angulartypescriptrestcastingangular-cli

The grid lines in d3 js are not aligned with the axes

My current project involves creating a multi-line chart using d3.js in React. However, I am encountering an issue with the alignment of gridlines in the plot. The problem seems to be random, as some graphs have aligned gridlines while others do not. The c ...

javascriptreactjstypescriptd3.jscharts