According to drewmoore, the most effective solution in this scenario involves manually triggering change detection for the current component. This can be achieved by using either the detectChanges() method of the ChangeDetectorRef object (imported from angular2/core) or its markForCheck() method, which also triggers updates in any parent components. An illustrative example can be found below:

import { Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App implements AfterViewInit {
  message: string = 'loading :(';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this.cdr.detectChanges();
  }

}

Additionally, there are Plunkers showcasing the ngOnInit, setTimeout, and enableProdMode methods for reference.

ngAfterViewChecked() solved my issue:

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

constructor(private cdr: ChangeDetectorRef) { }
ngAfterViewChecked(){
   //add your code to refresh the data
   this.cdr.detectChanges();
}

To resolve the issue, I included the ChangeDetectionStrategy from the Angular core library.

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})

Is it not possible to utilize ngOnInit if you are only modifying the member variable message?

When you need to access a reference to a child component using @ViewChild(ChildComponent), you must wait for it with ngAfterViewInit.

A temporary solution is to invoke the updateMessage() function in the next event loop using setTimeout.

ngAfterViewInit() {
  setTimeout(() => {
    this.updateMessage();
  }, 1);
}

In the quest to find a solution, I have explored various responses but many seem ineffective in the most recent versions of Angular (6 or later).

My current challenge lies in utilizing Material controls, which require modifications after the initial binding process.

    export class AbcClass implements OnInit, AfterContentChecked{
        constructor(private ref: ChangeDetectorRef) {}
        ngOnInit(){
            // perform your tasks here
        }
        ngAfterContentChecked() {
            this.ref.detectChanges();
        }
    }

Presenting my unique approach in the hopes of aiding others facing similar issues.

I made the switch from AfterViewInit to AfterContentChecked and saw immediate results.

Follow these steps:

1. Include the dependency in your constructor:

   constructor (private cdr: ChangeDetectorRef) {}

2. Execute your logic in the implemented method like this:

    ngAfterContentChecked() {
        this.cdr.detectChanges();
     // add your logic here
    }
   

The informative article on the ExpressionChangedAfterItHasBeenCheckedError error provides a detailed explanation of its behavior.

Your current issue arises from the execution of the ngAfterViewInit lifecycle hook after DOM updates are processed during change detection. This results in a situation where you are modifying a property used in the template within this hook, necessitating a re-rendering of the DOM:

  ngAfterViewInit() {
    this.message = 'all done loading :)'; // needs to be rendered in the DOM
  }

As a result, an additional change detection cycle is required, but Angular is designed to only run one digest cycle.

To resolve this issue, you have two options:

• Update the property asynchronously by using methods such as setTimeout, Promise.then, or an asynchronous observable referenced in the template.

• Perform the property update in a hook that occurs before the DOM update - such as ngOnInit, ngDoCheck, ngAfterContentInit, or ngAfterContentChecked.

The reason for this error is that the existing value is being updated immediately after initialization. To avoid this issue, you need to update the new value after the existing value has been rendered in the DOM. This concept is explained in detail in the article Angular Debugging "Expression has changed after it was checked"

For example, you can use the following code:

ngOnInit() {
    setTimeout(() => {
      //code for your new value.
    });

}

or

ngAfterViewInit() {
  this.paginator.page
      .pipe(
          startWith(null),
          delay(0),
          tap(() => this.dataSource.loadLessons(...))
      ).subscribe();
}

In the setTimeout method, there is no time mentioned. This is because it is a browser provided API, not a JavaScript API. Therefore, it will run separately in the browser stack and will wait until the call stack items are finished.

The concept of how the browser API invokes events is explained by Philip Roberts in one of his Youtube videos (What the hack is event loop?).

In order to update your message at the right time during the lifecycle of your application, you should utilize the ngAfterContentChecked lifecycle hook instead of ngAfterViewInit. This is because in the ngAfterViewInit hook, the check for the variable message begins but is not yet completed.

For more information, please refer to: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview

Simply update your code as follows:

import { Component } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message: string = 'loading :(';

  ngAfterContentChecked() {
     this.message = 'all done loading :)'
  }      
}

Check out the working demo on Plunker.

Here's a simple solution: start by disabling change detection in the construction phase of your component, then re-enable it using the detectChanges() function within the ngAfterViewInit() method.

constructor(private cdr: ChangeDetectorRef) {
  this.cdr.detach(); // Disable change detection in constructor
}

ngAfterViewInit(): void {
  // Implement loading of objects or other logic here
  // At the end of this method, re-enable change detection using detectChanges()
  this.cdr.detectChanges(); // Enable change detection here to complete the process
}

An alternative option is to place your call to updateMessage() within the ngOnInit() lifecycle hook. This approach has been successful for me in the past.

ngOnInit() {
    this.updateMessage();
}

It's worth noting that in the RC1 version of the code, this method does not result in any exceptions being triggered.

Another method to implement a countdown is by utilizing the rxjs library's Observable.timer function. Once the timer is created, you can proceed to modify the message within your subscription:

Observable.timer(1).subscribe(()=> this.updateMessage());

An error is triggered due to changes in your code when the ngAfterViewInit() function is executed, causing your initial value to be altered. If you were to invoke it within the ngAfterContentInit() function instead, the error would not occur.

ngAfterContentInit() {
    this.refreshContent();
}

I am facing a similar situation where I need to manage an array of products and allow users to remove products based on their preferences. If the array becomes empty, I want to display a Cancel button instead of a Back button without refreshing the page.

To achieve this, I checked for an empty array using the ngAfterViewChecked() lifecycle hook. Here is the solution I implemented, hoping it can be helpful:

import { ChangeDetectorRef } from '@angular/core';

products: Product[];
someCondition: boolean;

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewChecked() {
  if(!this.someCondition) {
    this.checkEmptyArray();
  }
}

checkEmptyArray() {
    this.someCondition = this.products.length === 0 ? true : false;

    // trigger change detection explicitly
    this.cdr.detectChanges();
}

removeProduct(productId: number) {
    // implement your logic for removing the product.
}

An alternative approach is to place this.updateMessage(); inside the ngOnInit function as shown below:

ngOnInit(): void { 
  this.updateMessage();
}

One issue I encountered involved a p-radioButton in my scenario. The issue stemmed from using the unnecessary name attribute in conjunction with the formControlName attribute, as shown below:

<p-radioButton formControlName="isApplicant" name="isapplicant" value="T" label="Yes"></p-radioButton>
<p-radioButton formControlName="isApplicant" name="isapplicant" value="T" label="No"></p-radioButton>

Furthermore, I had initially bound the value "T" to the isApplicant form control like this:

isApplicant: ["T"]

To resolve the issue, I made corrections by removing the name attributes from the radio buttons. Additionally, since both radio buttons had the same value (T), which was incorrect in my case, changing one of them to a different value (such as F) also resolved the problem.

When faced with a similar issue, I managed to resolve it by utilizing AfterViewInit along with ChangeDetectionStrategy.OnPush

For more in-depth information, check out this informative article: https://medium.com/@johndoe/angular-change-detection-strategy-explained-123abc456def

Unfortunately, I was unable to respond to @Biranchi's post due to my lack of reputation, but his solution managed to resolve the issue I was facing.

It's worth mentioning that if including changeDetection: ChangeDetectionStrategy.OnPush in the component didn't solve the problem, and it is a child component (dumb component), consider adding it to the parent component as well.

This successfully fixed the bug, although I am curious about the potential side effects of this approach.

Encountered a similar issue when utilizing a datatable. The problem arises when nesting *ngFor loops within each other, causing the datatable to throw an error due to conflicting changes in the Angular cycle. To resolve this issue, consider using a regular table instead of nesting datatables, or replace mf.data with the appropriate array name. This adjustment should resolve the error.

Here is a straightforward solution that can be implemented:

1. Create a single implementation for assigning a value to a variable, whether through a function or setter.
2. In the class where this function is located, establish a class variable (static working: boolean). Each time the function is called, set this variable to true as desired. Inside the function, check if the value of 'working' is true, and if so, simply return without taking any action. Otherwise, proceed with the task at hand. Remember to set this variable back to false once the task is finished, either at the end of the code block or within the subscribe method after all value assignments have been completed!

Great insights provided. In my experience, utilizing ChangeDetectorRef and AfterViewInit in Angular can lead to additional rendering cycles. This can result in extra calls for view rendering, especially if the HTML code is not carefully designed or if multiple function calls in the TypeScript code depend on refresh.

To address this issue, I have found a simple and effective solution that bypasses these challenges. By using a zero-delay Promise to update values, I can separate the value update process into the next processing cycle, avoiding the common error message "Expression has changed after it was checked."

The key is a public function that applies a zero delay Promise to pass values:

export async function delayValue(v: any, timeOutMs: number = 0): Promise<any> {
    return new Promise((resolve) => {
        setTimeout(() => {
          resolve(v);
        }, timeOutMs);
      });
}

To implement this solution, simply use the function in one line of code:

this.myClassValue = await delayValue(newValue);

The negligible delay is due to the zero value set for timeOutMs.

This method can be particularly helpful in scenarios where you want to handle new values without encountering errors:

myObservable$.subscribe(newValue  = {
    ...                
    this.handleSubscribedValues(newValue);
    ...
});

private handleSubscribedValues(newValue) {
    this.myClassValue = newValue;
}

private async handleSubscribedValues(newValue) {
    this.myClassValue = await delayValue(newValue);
}

Additionally, the delayValue() function can be customized with a delay/timeout value if needed, such as creating a brief pause for a user action.

I hope this strategy proves beneficial to those facing similar challenges.

Simply transfer the code to the constructor of the component where you are modifying the shared service subject