change the agm-circle color

215 views Asked by At

I want to change the agm-circle color when the map changes its mode to dark mode.

I have a behavior subject as follows in the service file

private isDarkModeActiveSubject = new BehaviorSubject<boolean>(false);
readonly isDarkModeActive$ = this.isDarkModeActiveSubject.asObservable();

In my component file, In ngOnInit method have the following code

this.mapToolbarService.isDarkModeActive$
  .pipe(takeUntil(this.unsubscriber.done))
  .subscribe((isDarkModeActive: boolean) => {
    this.changeTheAgCircleColor(isDarkModeActive);
    ComponentChangeUtils.detectChanges(this.changeRef);
  });

and then changeTheAgCircleColor method

  changeTheAgCircleColor(isDarkModeActive: boolean) {
    if (isDarkModeActive) {
      this.pickupClusterPoints.forEach((point) => {
        point.fillColor = '#FFCF4D';
        point.strokeColor = '#FFEB3B';
      });
    } else {
      console.log('light mode', isDarkModeActive);
      // this.pickupClusterPoints.forEach((point) => {
      //   point.fillColor = '#333';
      //   point.strokeColor = '#333';
      // });
    }
  }

export interface PickupClusterPoint extends PositioningPoint {
  strokeColor?: string;
  fillColor?: string;
 // some other varibles 
}

HTML file

  <ng-container *ngFor="let point of pickupClusterPoints">
    <agm-circle
       
      [strokeColor]="point.strokeColor"
      [strokeWeight]="point.strokeWeight"
      [fillColor]="point.fillColor"
   
    ></agm-circle>

the circle color change if dark mode active but when I revert to light mode it remains the same. The commented code in else block, if I uncomment it nothing works, I mean subscriber does not work and hence no method call. console.log alone works.

0

There are 0 answers