Angular Debugging "Expression has changed after it was checked" Error - Simple Explanation (and Fix)

01.ts

@Component({
    selector: 'course',
    templateUrl: './course.component.html'
})
export class CourseComponent implements AfterViewInit {

    @ViewChild(MatPaginator) paginator: MatPaginator;
       
    ngAfterViewInit() {
        this.paginator.page
            .pipe(
                startWith(null),
                tap(() => this.dataSource.loadLessons(...))
            ).subscribe();
    }
}
          

02.ts

export class LessonsDataSource implements DataSource<Lesson> {

    private loadingSubject = new BehaviorSubject<boolean>(false);
    public loading$ = this.loadingSubject.asObservable();

    loadLessons(...) {

        this.loadingSubject.next(true);
  
        ... load new data page from the backend
    }    
}
  
  

03.ts

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

                                      

04.ts

import { startWith, tap, delay } from 'rxjs/operators';

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

05.ts

@Component({
    selector: 'course',
    templateUrl: './course.component.html'
})
export class CourseComponent implements AfterViewInit, OnInit {

    @ViewChild(MatPaginator) paginator: MatPaginator;
       
    ngOnInit() {
      // load the initial page
      this.dataSource.loadLessons(...);
    }

    ngAfterViewInit() {
        this.paginator.page
            .pipe(
                tap(() => this.dataSource.loadLessons(...))
            ).subscribe();
    }
}