How to show/hide the agm circle when user clicks on each marker pin - Angular 8

Question

I'm trying to allow user to click on the marker pin to show the red circle for the specific pin.

Below is my map code:

<agm-map
  [latitude]="centerLatitude"
  [longitude]="centerLongitude"
  (mapClick)="mapClicked($event)"
  [usePanning]="true"
  [zoom]="6">

  <ng-container *ngIf="source != null">
    <agm-marker *ngFor="let marker of [].concat(source); let i = index"
      [latitude]="marker.geoLatitude"
      [longitude]="marker.geoLongitude"
      [label]="marker.label"
      [openInfoWindow]="showInfoWindow">  

      <ng-container *ngIf="marker.geoLatitude && marker.geoLongitude">
          <agm-info-window [disableAutoPan]="false" [isOpen]="showInfoWindow">
                  <label class="sr-bold">{{ marker?.name }}</label>
            </agm-info-window>    
      </ng-container>
      <agm-circle *ngIf="marker.geoLatitude && marker.geoLongitude" 
        [latitude]="marker.geoLatitude"
        [longitude]="marker.geoLongitude"
        [radius]="marker.radius ? marker.radius * 1000 : null"
        fillColor="red">
      </agm-circle>
    </agm-marker>
  </ng-container>
</agm-map>

Answer 1

agm-circle and agm-info-window are independent directives, and not children of an agm-marker.

<agm-map
  [latitude]="centerLatitude"
  [longitude]="centerLongitude"
  (mapClick)="mapClicked($event)"
  [usePanning]="true"
  [zoom]="6">

  <ng-container *ngIf="source != null">
    <ng-container *ngFor="let marker of [].concat(source)">
      <ng-container *ngIf="marker.geoLatitude && marker.geoLongitude">
        <agm-marker
          [latitude]="marker.geoLatitude"
          [longitude]="marker.geoLongitude"
          [label]="marker.label"
          [openInfoWindow]="showInfoWindow"> 
        </agm-marker>

        <agm-info-window [disableAutoPan]="false"
          [latitude]="marker.geoLatitude"
          [longitude]="marker.geoLongitude"
          [isOpen]="showInfoWindow">
                  <label class="sr-bold">{{ marker?.name }}</label>
        </agm-info-window>
        <agm-circle 
          [latitude]="marker.geoLatitude"
          [longitude]="marker.geoLongitude"
          [radius]="marker.radius ? marker.radius * 1000 : null"
          fillColor="red">
        </agm-circle>
      </ng-container>
    </ng-container>
  </ng-container>
</agm-map>

now, as for your request, you want the circle to only show up when the agm-marker is clicked. For that, we add a boolean to the data marker object

<agm-marker
  [latitude]="marker.geoLatitude"
  [longitude]="marker.geoLongitude"
  [label]="marker.label"
  [openInfoWindow]="showInfoWindow"
  (click)="marker.markerClicked"
>
</agm-marker>
<agm-circle *ngIf="marker.markerClicked" 
...>