ExpressionChangedAfterItHasBeenCheckedError

[BickelLukas]

Using angular 9 I get an ExpressionChangedAfterItHasBeenCheckedError.

I solved it by overriding the MatCarouselSlideComponent and adding { static: true } to the templateRef property.

This is my component:

import { Component, forwardRef, TemplateRef, ViewChild } from '@angular/core';
import { MatCarouselSlideComponent } from '@ngmodule/material-carousel';

@Component({
    selector: 'agp-carousel-slide',
    templateUrl: './carousel-slide.component.html',
    styleUrls: ['./carousel-slide.component.scss'],
    providers: [
        { provide: MatCarouselSlideComponent, useExisting: forwardRef(() => CarouselSlideComponent) }
    ]
})
export class CarouselSlideComponent extends MatCarouselSlideComponent {
    @ViewChild(TemplateRef, { static: true }) public templateRef: TemplateRef<any>;
}

It would be nice if this fix gets included in the core library so we dont have to override the component ourselves.

[anilkumar007]

@BickelLukas The above solution is not working. it is throwing an error as type static boolean is not assignable to read value { static: true }

[BickelLukas]

@anilkumar007 The static property has been added to ViewChild in Angular 8. If you have a previous version this fix will not work

[bunda3d]

I'm using Angular 9 and can't get this fix to work. If I just add the static statement to viewchild it doesn't work; if I extend the class, import from the package and add the static statement it errors about the DomSanitizer constructor. Any more guidance or fixes for the ExpressionChangedAfterItHasBeenCheckedError ?