[Question] How can I use custom html elements inside <agm-circle> directive?

I have a requirement where I need to draw a circle (with lat/long and radius of the circle) with four equal quadrants, dividing the circle into four equal halves.

Is it possible to use custom HTML elements inside <agm-circle> so using CSS, I can draw vertical and horizontal lines defining quadrants? Something like below image:

Can I do something like this:

<agm-circle *ngFor="let circle of circles" [latitude]="circle.lat" [longitude]="circle.lng" [radius]="circle.radius"
    [fillColor]="circle.color" [circleDraggable]="true" [editable]="true">
    <div class="quadrants">
      <div class="vertical"></div>
      <div class="horizontal"></div>
    </div>
  </agm-circle>

Using Angular CLI 7 and AGM@1.0.0-beta.5

[ghost]

Ok, this time I tested and it works.

Basically two mistakes were that Math.cos accepts radians, not degrees, and the entire radius length should be the start of the line, and not half.

  meterToLng(radius: number, lat: number): number {
    return radius /( 111111 * Math.cos(lat * Math.PI / 180));
  }
  meterToLat(radius: number): number {
    return radius / 111111;
  }

<ng-container *ngFor="let circle of circles" >
  <agm-circle [latitude]="circle.lat" [longitude]="circle.lng" [radius]="circle.radius" [fillColor]="circle.color" [circleDraggable]="true" [editable]="true">
  </agm-circle>
  <agm-polyline>
    <agm-polyline-point [latitude]="circle.lat" [longitude]="circle.lng - meterToLng(circle.radius, circle.lat)"> 
    </agm-polyline-point>
    <agm-polyline-point [latitude]="circle.lat" [longitude]="circle.lng + meterToLng(circle.radius, circle.lat)"> 
    </agm-polyline-point>
  </agm-polyline>
  <agm-polyline>
    <agm-polyline-point [latitude]="circle.lat - meterToLat(circle.radius, circle.lng)" [longitude]="circle.lng"> 
    </agm-polyline-point>
    <agm-polyline-point [latitude]="circle.lat + meterToLat(circle.radius, circle.lng)" [longitude]="circle.lng"> 
    </agm-polyline-point>
  </agm-polyline>
</ng-container>

[faizansaiyed]

Thanks a lot, savior! One more little help? My circle is editable, so if I change the radius of the circle, it should update the polylines. How can I do that? Currently, polylines do not update if I update radius, but if I change the center point, it works well.

I did this:

<agm-circle [latitude]="circle.lat" [longitude]="circle.lng" [radius]="circle.radius" [fillColor]="circle.color" circleDraggable]="false" [editable]="true" (radiusChange)="updateCircle($event, i)" (centerChange)="updateQuadrants($event, i)"></agm-circle>

and

updateQuadrants(event, index) {
  this.circles[index].lat = event.lat;
  this.circles[index].lng = event.lng;
}

updateCircle(event, index) {
  this.circles[index].radius = event;
}

With centerChange event, lines are getting updated, but not with radiusChange event:

Thanks again!