Show return value of Function in Angular Typescript

Question

I am using angular and I want to show in HTML the result of a function. when I use

  var geo = function onLocationFound(e) {
  var radius = e.accuracy / 2;
  let marker = new L.Marker(e.latlng, {
    draggable: true,
    icon: Icon
  }).bindPopup(""+e.latlng);;
  map.addLayer(marker);
  return e.latlng
  }      
  this.latlng = geo;

and then {{latlng}} in HTML, It always shows the Code of the whole function and not the return value even though I am just returning the latlng value. where am I going wrong?

See the question: assign function return value to some variable using javascript

the whole .ts file:

import { Component } from '@angular/core';
import { icon,latLng, marker, polyline, tileLayer,Map, point } from 'leaflet';
/*import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';*/
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
latlng:any

 public onMapReady(map: Map) {
    map.locate({setView: true, maxZoom: 16}); 
    /*map.on('click', <LeafletMouseEvent>(e) => { alert(e.latlng.lat); alert(e.latlng.lng); });*/
    var Icon = L.icon({
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png',
      iconSize:     [25,41], // size of the icon
      iconAnchor: [ 13, 41 ], // point of the icon which will correspond to marker's location
      shadowAnchor: [4, 62],  // the same for the shadow
      popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

     function onLocationFound(e) {
      var radius = e.accuracy / 2;
      let marker = new L.Marker(e.latlng, {
        draggable: true,
        icon: Icon
      }).bindPopup(""+e.latlng);;
      map.addLayer(marker);
      this.latlng = e.latlng
      }      


 map.on('locationfound', onLocationFound);

  }

 
  

  

  // Define our base layers so we can reference them multiple times
  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });
  googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });
  

  // Marker for the top of Mt. Ranier
  summit = marker([ 46.8523, -121.7603 ], {
    icon: icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });

  // Layers control object with our two base layers and the three overlay layers
  layersControl = {
    baseLayers: {
      'Google Maps': this.googleMaps,
      'Google Hybrid': this.googleHybrid,
      },
    }
 /*    overlays: {
      'Mt. Rainier Summit': this.summit,
      'Mt. Rainier Paradise Start': this.paradise,
      'Mt. Rainier Climb Route': this.route
    } */


  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)
  options = {
    layers: [this.googleMaps]
  };

  
 

  
};

Answer 1

Try below code :

function onLocationFound(e) {
      var radius = e.accuracy / 2;
      let marker = new L.Marker(e.latlng, {
        draggable: true,
        icon: Icon
      }).bindPopup(""+e.latlng);;
      map.addLayer(marker);

      this.latlng = e.latlng
      }
    }

In HTML:

{{ latlng }}

If you want to pass it somewhere else or to other function then use this.latlng as function parameter

Answer 2

You're assigning the function itself to this.latlng, rather than calling the function and assigning the result. Call the function by adding parentheses:

this.latlng = geo();