how to fetch data from mapbox to html page

Question

i am using Mapbox gl js. I am getting data in the console but i am not able to fetch that data to HTML, can anyone help me to do that. I need the data, inside the mapdata to display on html page, and when i click on the marker, den the showStory condition must become true. I tried using mapData by using ngFor but it didnt work, and the data present in console also dont come when i do console outside the mapbox.

HTML:

   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" (click)="openFav()" *ngIf="showStory">
        <ul class="addressClass">
          <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
          <li><b>Place/Name</b></li>
          <li>Country, City</li>
          <li>Postal Code, Address</li>
        </ul>
      </div> 

Ts:

public showStory:boolean = false;
this.ApiService
              .getAllPins()
              .subscribe(
                pins => {
                  this.places = pins.data;
                  this.points = this.places.map(function(pins) {
                    return {"name":pins.name,"lat":pins.lat,"lang":pins.lang,"address":pins.address,"category_name":pins.category_name,
                    "description":pins.description,"email":pins.email,"phone_number":pins.phone_number,"pin_media":pins.pin_media,
                    "country":pins.user_details.country,"user_name":pins.user_details.user_name};
                });
                  mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
                    var coOrdinates = this.points;
                    var map = new mapboxgl.Map({
                      container: 'maps',
                      style: 'mapbox://styles/mapbox/streets-v9',
                      center: [coOrdinates[1].lat,coOrdinates[1].lang],
                      zoom: 3
                    });
                    map.on('load', function () {
                      for(var i=0; i< coOrdinates.length; i++) {
                        map.addLayer({
                        "id": "points" + i,
                        "type": "circle",
                        "paint":{
                          "circle-radius":15,
                          "circle-color":'#' + (Math.random().toString(16) + "000000").substring(2,8)    
                        },
                        "source": {
                          "type": "geojson",
                          "data": {
                            "type": "FeatureCollection",
                            "features":  [{
                                "type": "Feature",
                                "properties": {"field":coOrdinates[i],"name":coOrdinates[i].name},
                                "geometry": {
                                  "type": "Point",
                                  "coordinates": [coOrdinates[i].lat,coOrdinates[i].lang]
                                }
                              }]
                          }
                        }
                      });
                      var popup = new mapboxgl.Popup({
                          closeButton: false,
                          closeOnClick: false
                      });
                      map.on("mouseenter", "points" + i, e => {
                        this.id = e.features[0].layer.id;
                        map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
                        var coordinates = e.features[0].geometry.coordinates.slice();
                        var description = e.features[0].properties.name;
                        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                       }
                       popup.setLngLat(coordinates)
                            .setHTML(description)
                            .addTo(map);
                      });
                      map.on("mouseleave", "points" + i, e => {
                        if(this.id) {
                          map.setPaintProperty(this.id, 'circle-radius', 15);
                          this.id = undefined;
                        } 
                         popup.remove();
                      });
                      map.on("click", "points" + i, e => {
                        this.id = undefined;
                        this.mapData = e.features[0].properties
                        for(var i=0; i< coOrdinates.length; i++) {
                          map.setPaintProperty('points'+i, 'circle-radius', 15); 
                        }
                        map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
                        this.showStory = true; 
                       this.mapData = JSON.parse(this.mapData.field);
                       console.log(this.mapData);
                      });
                      }
                    });
          }, error => {});

Answer 1

If you want to show data from component into HTML, use innerHTML property,

In html,

<li><b [innerHTML]="place"></b></li> 
<li [innerHTML]="Country, City"></li> 
<li [innerHTML]="Postal Code, Address"></li> 

in Ts:

add, this.place = this.mapData.place;

map.on("click", "points" + i, e => {
    this.id = undefined;
    this.mapData = e.features[0].properties
    for(var i=0; i< coOrdinates.length; i++) {
        map.setPaintProperty('points'+i, 'circle-radius', 15); 
    }
    map.setPaintProperty(e.features[0].layer.id, 'circle-radius', 20);
    this.showStory = true; 
    this.mapData = JSON.parse(this.mapData.field);
    this.place = this.mapData.place; 
    console.log(this.mapData);
});