1

For example I have agm-map and two agm-circle's in my Angular HTML file. And fillColor for circles is set to red like this:

<agm-circle [latitude]="lat1" [longitude]="lng1" 
      [radius]="5000"
      [fillColor]="'red'">
</agm-circle>
<agm-circle [latitude]="lat2" [longitude]="lng2" 
      [radius]="1000"
      [fillColor]="'red'">
</agm-circle>

Now I want to remove duplicating of fillColor value. I know I can do it like this:

In HTML:

[fillColor]="circleFillColor"

In TS:

circleFillColor = 'red';

But I think the more appropriate place for colors is CSS file. So the question is: how to define this color in CSS.

0xC01L
  • 11
  • 2
  • You can use something like: https://stackoverflow.com/questions/46345140/ngfor-with-agm-circle-throws-error-angular2 which put the data in JSON format. FWIW, I don't think it's as simple as a single class CSS styling for [fillColor] on angular-google-map. Feel free to CMIIW. – Shinjo Jul 23 '19 at 08:35
  • Angular Google Maps is just a wrap for Google Maps Javascript Api. Circles here is not normal DOM element, there are drawn using ``. So it's not possible to style Google Maps circle directly from CSS. You could make css class for invisible pseudo-element, and read it's style using JavaScript `getComputedStyle()`. Maybe it's a good idea to write Angular Service for getting values from such pseudo-elements – Evgenii Malikov Jul 23 '19 at 08:36
  • I’ve decided to write Angular Service for it. Will post a link when it’s finished – Evgenii Malikov Jul 23 '19 at 09:03

0 Answers0