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?

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.): https://stackoverflow.com/a/34829089/850782 — EpicVoyage, Oct 12 '20 at 16:32

score 10 · Accepted Answer · answered Nov 27 '18 at 19:34

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

score 2 · Answer 2 · answered Sep 29 '20 at 08:47

2

This way child component will ignore the parent component providers

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

answered Sep 29 '20 at 08:47

Sachini Witharana

116
6

How to fix ChangeDetectorRef import error: No provider for ChangeDetectorRef

2 Answers2