How to call a function from HTML automatically without any click event


#1

I’m calling plot() function from HTML. but it is getting called several times. How to make it call once when the *ngIf condition turns true.
.ts file

 plot(){
    var self = this;
    this.geolocation.getCurrentPosition().then((position) =>   {
 
      let lat = self.lat;
      let lng= self.lng;
       console.log(lat);
       console.log(lng);
      let mapOptions = {
        center: new google.maps.LatLng(lat,lng),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      this.addMarker();
    }, (err) => {
      console.log(err);
    });
  }
  addMarker(){
    console.log("coming in marker");
    var self=this;
    let lat = self.lat;
    let lng= self.lng;
    var markerPos = new google.maps.LatLng(lat,lng);
    let marker = new google.maps.Marker({
    map: self.map,
    animation: google.maps.Animation.DROP,
    position:markerPos,
    
 });
 console.log(marker.position);
 let content = "<h4>Information!</h4>";          
 this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
 
  let infoWindow = new google.maps.InfoWindow({
    content: content
  });

 google.maps.event.addListener(marker, 'click', () => {
   infoWindow.open(this.map, marker);
 });
}

HTML file

<div style="width: 80%;margin-right:3%;" *ngIf="chatMessage.types=='checkin' " class="message {{chatMessage.type === 'message_response' ? 'right' : 'left'}} img">
    <img *ngIf="chatMessage.userIcon=='mji247'" src="assets/mji.png">
    <img *ngIf="chatMessage.userIcon==''" src="assets/user.png">
    <p style="font-size: 12px;white-space: pre-wrap;">{{this.chatMessage.msg.name}}:</p>
 
    <div #map id="map" style="height: 200px;width: 225px;float: right;margin-right: 22px;border-radius: 5%;">
        {{plot()}}
    </div>
    <p *ngIf="chatMessage.type != 'message_response'" style="overflow: auto;text-align: right;margin-left: 12%;font-size: 12px;white-space: pre-wrap;">{{this.chatMessage.msg.date}}</p>
    <p *ngIf="chatMessage.type == 'message_response'" style="overflow: auto;font-size: 12px;white-space: pre-wrap;">{{this.chatMessage.msg.date}}</p>
</div>

#2

Just in your page.ts file you’ll find the following:

ionViewDidLoad() {
}  

Just add your function right there. Then it will fire up when page is loaded.

ionViewDidLoad() {
    this.plot();
} 

And remove {{plot()}} from html.