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.