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;
    }