How to fix ChangeDetectorRef import error: No provider for ChangeDetectorRef
So the cause of the issue I found out was I was trying to use ChangeDetectorRef in the grandchild component, which is a no-no.
I instead used ChangeDetectorRef in the root parent component (PComponent) and also implemented the ngAfterContentChecked() method for that component.
This is what it ended up looking like in PComponent:
import { Component, OnInit, ViewContainerRef, ChangeDetectorRef, AfterContentChecked } from '@angular/core';
export class PComponent implements OnInit, AfterContentChecked {
constructor(private cdr: ChangeDetectorRef){}
ngAfterContentChecked() {
this.cdr.detectChanges();
}
ngOnInit() {
....
}
}
This way child component will ignore the parent component providers
constructor(@Optional() private ref: ChangeDetectorRef) {
this.ref = ref;
}