How to fix ChangeDetectorRef import error: No provider for ChangeDetectorRef

Question

I'm having an issue importing ChangeDetectorRef into one of my components.

For reference, the family tree goes PComponent (parent) -> Options-Grid (child) -> FComponent (grandchild).

This is the error I'm getting in the browser:

StaticInjectorError(AppModule)[FComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[FComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!

The line of code that the error takes me to is in the Grandparent component (PComponent), where it instantiates the first child component (Options-Grid).

<div>
    <options-grid></options-grid>
</div>

I am providing ChangeDetectorRef correctly in the constructor and importing it correctly in FComponent. The error reference in the code points to PComponent html where I instantiate Options-Grid component.

Is this because I'm not providing ChangeDetectorRef in the parent component?

Answer 1

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() {
        ....
    }
}

Answer 2

This way child component will ignore the parent component providers

   constructor(@Optional() private ref: ChangeDetectorRef) {
        this.ref = ref;
    }