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?

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?

• javascript
• angular
• angular2-changedetection

• 1 There are 3 methods that can be used to trigger change detection. Which one is necessary depends on where and how you are setting the value (component, helper class, &c.): stackoverflow.com/a/34829089/850782 – EpicVoyage Commented Oct 12, 2020 at 16:32

2 Answers 2

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