ExpressionChangedAfterItHasBeenCheckedError received

[evandorland]

I've got this error when using the carousel
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngTemplateOutlet: undefined'. Current value: 'ngTemplateOutlet: [object Object]

I have 2 components making using of the carousel. Both components are used on the same page. One of them is creating the error. Even with this simple setup:

    <mat-carousel slides="1">
      <mat-carousel-slide>
        1
      </mat-carousel-slide>
    </mat-carousel>

Is there anything I'm doing wrong, or is it simply a limitation on the use of the component?

[gbrlsnchs]

I haven't had this issue myself, so I need to investigate further. Sorry for the inconvenience.

[tomschreck]

I too am getting this same error. However, I am only implementing the carousel one time inside a component. Any progress on a solution?

This seems like a good reference: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

[svn-arc]

This has to do with change detection. You can read more about it here. I solved this problem by using the detectChanges() method from ChangeDetectorRef i.e.

constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {}

  ngAfterViewInit(): void {
    this.cdr.detectChanges();
  }

You'll need to implement the AfterViewInit interface.

[suga0828]

By the way, when @dsitaliM says: You'll need to implement the AfterViewInit interface., he refers to:

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

export class YourClass implements OnInit, AfterViewInit {
  ...
}

[evandorland]

That worked for me. Thanks for your support.