I am facing an issue while trying to inject the ChangeDetectorRef service into my custom pipe in Angular. The error I am encountering is: No provider for ChangeDetectorRef!
Although I have looked at various examples related to similar functionalities (such as Translate pipe or async pipe), I am unable to make it work for my custom pipe...
Below is the code for my custom 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();
}
}
I believe that adding the ChangeDetectorRef to the module is unnecessary as it is a core functionality.
Thank you for your assistance!