CODEWITHSUNDEEP
angulartypescriptpipe
Skulker
Skulker

Reputation: 87

How to inject ChangeDetectorRef service into pipe

I'm trying to inject the ChangeDetectorRef service into my pipe but when launch the app this is my error : No provider for ChangeDetectorRef!

I have seen several examples of what i'm trying to do (Translate pipe or async pipe). But it's not working with mine...

Here is my pipe :

import {Injectable, Pipe, PipeTransform, ChangeDetectorRef, OnDestroy} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {LangChangeEvent, TranslateService} from '@ngx-translate/core';

@Injectable()
@Pipe({
    name: 'CollectionTranslation',
    pure: false
})

export class CollectionPipe implements PipeTransform, OnDestroy {
    value: string;
    lastKey: string;

    onLangChange: Subject<LangChangeEvent>;

    constructor(private translate: TranslateService, private _ref:   ChangeDetectorRef) {

    }

    updateValue(key: string, lang: string) {
        this.value = this.collectionTranslation(key, lang);
        this.lastKey = key;
        this._ref.markForCheck();
    }

    transform(collectionParam: string) {
        // lang parameter is just here to execute the pipe each time the current lang is changed.
        // it's not used in the pipe

        if (this.lastKey === collectionParam) {
            return this.value;
        }

        this.updateValue(collectionParam, localStorage.getItem('kia.language'));

        if (!this.onLangChange) {
            this.onLangChange = this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
                if (this.lastKey) {
                    this.lastKey = null; // we want to make sure it doesn't return the same value until it's been updated
                    this.updateValue(collectionParam, event.lang);
                }
            });
        }

        return this.value;
    }

    private collectionTranslation(collectionParam: string, lang: string): string {
        let collection = '';
        if (collectionParam === null || collectionParam === undefined) {
            return '';
        }

        const coll = collectionParam.toUpperCase();
        if (lang === 'fr') {
            collection = coll.startsWith('E') || coll.startsWith('S') ? 'ETE ' : 'HIVER ';
        } else {
            // Lang EN
            collection = coll.startsWith('E') || coll.startsWith('S') ? 'SUMMER ' : 'WINTER ';
        }

        collection = collection + coll.substring(coll.length - 2);

        return collection;
    }

    _dispose(): void {
        if (typeof this.onLangChange !== 'undefined') {
            this.onLangChange.unsubscribe();
            this.onLangChange = undefined;
        }
    }

    ngOnDestroy(): void {
        this._dispose();
    }
}

For me, there is no need to add the ChangeDetectorRef to the module since it is core.

Thanks for your help !

Upvotes: 1

Views: 3141

Answers (1)

Luca Taccagni
Luca Taccagni

Reputation: 1059

i think you should use ApplicationRef instead of ChangeDetectorRef because the second one only see if in a specific component there are changes. Try doing same thing with the first one.

However, could you paste your Component.ts file where you have an example of using this pipe? Have you added in providers the pipe AND the Detector?

Hope will help

Upvotes: 1

Related Questions