how to write the code to show and hide the data in if condition

Question

In my angular application I have created the dashboard page In that created the map and right side placed the data to display something about the map (ie created the circle in the map of 5km radius if the marker inside the circle show the details of the marker).

I have written the if loop for the marker comes inside the circle it should be turned to red otherwise blue.

In that condition I have to show exactly when the drone inside the circle I have to show some data in html. If outside the data should be hidden.

component.ts

function inQuadrant(quadrant,marker){
    var inPolygon02 = isMarkerInsidePolygon02(marker,quadrant);
  if(inPolygon){
    quadrant.setStyle({color: 'red'});
  }else{
    quadrant.setStyle({color: '#3388ff'});
  }
}

from the above code I have to show the data if it is red color(inside of circle)otherwise hide the data.

component.html

<div class="tab-pane fade " id="Drones">
  <ul class="list-group card"  id="dd">
    <li class="list-group-item" *ngFor="let x of datas">
        <div class="row no-gutters">
        <div class="col-sm-3" >
          <div class="card-body">
  <img src="{{drone01.iconref}}" width="90" height="90">
  
         </div>
      </div>
</div>
</li>
</ul>
</div>

Can anyone help me regarding this.

Answer 1

You can use the hidden property. Let me give you an example

Suppose, you have a property in your component class

public isRed:boolean = true;

In the component html file, you can bind the hidden property

<div [hidden]="!isRed">
</div>

It will hide this div , if isRed is set to false otherwise it will show the div .