How to show and hide the data when the condition is true

In my angular application I have created the dashboard page. In that page I have created some conditions based on the condition it has to show on the view if the condition is false it will remove from the view page.

Dashboard.component.ts

var insidecirclespace1 = (lat,long) => {
for (var i=0; i< this.sensors.length;i++){

  if (getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat,long) <= 5.0) {
    circlemark[i].setStyle({ color: 'red', weight: 1, opacity: 7.0 });
    
      "model": "1001",
      "sensorname": "Sensor 1",
     
     "rf": "1",
      "Idref": "1"
    });

  }
  
  }
  outsidespace(latlngs[latlngidx1].lat,latlngs[latlngidx1].lon,latlngs02[latlngidx2].lat,latlngs02[latlngidx2].lon);

}

var insidecirclespace2 = (lat,long) => {
  for (var i=0; i< this.sensors.length;i++){
  
    if (getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat,long) <= 5.0) {
      circlemark[i].setStyle({ color: 'red', weight: 1, opacity: 7.0 });

      this.wifiDrones.push({
       
        "model": "1002",
        "sensorname": "Sensor 2",
        "rf": "1",
        "Idref": "1"
      });
 }
     
    }

    outsidespace(latlngs[latlngidx1].lat,latlngs[latlngidx1].lon,latlngs02[latlngidx2].lat,latlngs02[latlngidx2].lon);
   }

  var outsidespace = (lat1,long1,lat2,long2)=>{

    for (var i=0; i< this.sensors.length;i++){
  
      if (getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat1,long1) > 5.0 && getDistanceFromLatLonInKm(this.sensors[i].latitude, this.sensors[i].longitude, lat2,long2) > 5.0) {
        circlemark[i].setStyle({ color: 'blue', weight: 1, opacity: 7.0 });
      
        }
}
    
    }

Based on the above condition the html page will show as

.component.html

 <div class="col-sm-4">
                  <div class="card-body">
  
                    <h5 class="card-text " style="color: white;"> {{x.model}}
                    </h5>

<!--some code -->
  </div>
</div>

Now my requirement is if the getdistanceInKm is less than 5 km It has to show the data on html page view if the distance is more than 5 km it has to remove (It will continuous for moving marker <5km or >5km)

It is coming for <5km for removing in >5km is not working can anyone please help me regarding this.



Read more here: https://stackoverflow.com/questions/64693051/how-to-show-and-hide-the-data-when-the-condition-is-true

Content Attribution

This content was originally published by Haritha at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: