I made a div in my html file and then i referenced it in my ts file using document.getElementByID. I then used its inner html as the content for an infowindow. But when i dont know how to make clicks work. When i try to add listeners to any element used in that div it doest work

I have tried adding (click)="functionName()", I have also tried storing the document.getElementByID in a variable and tried adding an event listener.

for html

<div id="newpininfo" class="newpininfo">
        <ion-item detail-push>
                Save Spot 
                <ion-icon color="white" name="ios-add-outline" item-left></ion-icon>   
        </ion-item>
 </div>

for ts

var testelement = document.getElementByID('newpininfo');

testelement.addEventListener('click', function() =>{
     //do something
});

1 Answers

1
Khurshid Ansari On Best Solutions

I also faced same issue. This trick solve my issue:

In html :

<div onclick="Window.myComponent.test()" id="newpininfo" class="newpininfo">
   <ion-item detail-push>
      Save Spot 
      <ion-icon color="white" name="ios-add-outline" item-left></ion-icon>   
   </ion-item>
</div>

In component(ts file)

class 
  constructor(){
    Window["myComponent"] = this;
  }


  test(){
    console.log("testing");
  }