How to change Angular bind value when using observable object

Issue

I'm trying to convert the offset value for time object in the URI, and the object is in observable object.

The error that I'm facing is:

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '2023-11-20T00:00:00-05:00'. Current value: '2023-11-20T00:00:00-06:00'. Find more at https://angular.io/errors/NG0100

HTML code:

<ng-container *ngFor="let app of siteGroup[site.name]">
                          <ng-template #tipContent1>
                            <div class="tooltip-container">
                              {{site.name}} - {{app.description}}
                            </div>
                          </ng-template>
                          <a class="clickable" [ngbTooltip]="tipContent1" [openDelay]="200" container="body"
                            ngbDropdownItem routerLink="/site/{{site.name}}/{{app.name}}"
                            [queryParams]="{caseName: routeParams.caseName, windowSize:  routeParams.windowSize, startTime: changeCurrentParamTimezoneStartTime() , endTime: changeCurrentParamTimezoneEndtime(), equipmentTypes: routeParams.equipmentTypes}"
                            (keydown.enter)="onEnter($event)">
                            {{app.name}}
                          </a>
                        </ng-container>

The function to change if the time object exist in

 changeCurrentParamTimezoneStartTime(){
    //initial value could be 2023-11-20T00:00:00-05:00
    if(this.routeParams.startTime){
      this.routeParams.startTime = this.routeParams.startTime.slice(0,10);

      this.routeParams.startTime = moment(this.routeParams.startTime)
                                  .utcOffset(parseFloat(this.timeZoneOffset), true)
                                  .startOf('day')
                                  .format();    

      //and the return value i want is 2023-11-20T00:00:00-06:00
      return this.routeParams.startTime;  
    }
    else{
          return;
    }
    
   
  }

  changeCurrentParamTimezoneEndtime(){
    // return null
    if( this.routeParams.endTime){

      this.routeParams.endTime = this.routeParams.endTime.slice(0,10);

      this.routeParams.endTime = this.routeParams.endTime = moment(this.routeParams.endTime)
                                .utcOffset(parseFloat(this.timeZoneOffset), true)
                                .endOf('day')
                                .format();      
      return this.routeParams.endTime;         
    }
    else{
      return;
    }
    
  }

and the observable object are initiallized in ngoninit

 this.navigationService.routeParams.subscribe(routeParams => this.routeParams = routeParams);

When I console the value, I can see the value is updated but the URI hasn't changed for the offset value.

Solution

This error states that there is a change in the component's data after the change detection has already run for the current cycle. Angular performs change detection to make sure that the component's data is consistent and doesn't change unexpectedly during a single cycle. If it detects changes after it has checked the component, it throws this error.

In your case to resolve try adding the below at the end of the ngOnInit

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';


export class ExampleComponent implements OnInit {

  constructor(private cdr: ChangeDetectorRef) {} // Dependency inject here

  ngOnInit(): void {
     this.navigationService.routeParams.subscribe(routeParams => { 
       this.routeParams = routeParams
       this.cdr.detectChanges(); // Manually trigger change detection
    });
         
    this.cdr.detectChanges(); // Manually trigger change detection
  }
}

Answered By - Selaka Nanayakkara