title: Show return value of Function in Angular Typescript
body: <p>I am using angular and I want to show in HTML the result of a function. when I use</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  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;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?</p>
  
  <p>See the question:
  <a href="https://stackoverflow.com/questions/3941381/assign-function-return-value-to-some-variable-using-javascript/50873588#50873588">assign function return value to some variable using javascript</a></p>
  
  <p>the whole .ts file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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', &lt;LeafletMouseEvent&gt;(e) =&gt; { 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&amp;x={x}&amp;y={y}&amp;z={z}', {
      maxZoom: 20,
      subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
      detectRetina: true
    });
    googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&amp;x={x}&amp;y={y}&amp;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]
    };
  
    
   
  
    
  };</code></pre>
  </div>
  </div>
  </p>