Angular 9 - Cant find custom pipe even with shared module

2
votes

I want to use a custom pipe in all of my components, according to the internet i should use a Shared module in which i import/export the pipe. When i import the shared module in the components in which i want to use the pipe it is supposed to work, but not for me.

The Pipe: import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'empty'
})
export class EmptyPipe implements PipeTransform {

  public transform(value: any, ...args: any[]): string {
    if (!value || value.length < 1) {
      if (args.length < 1) {
        return "-"
      } else {
        return args[0];
      }
    }
    return value;
  }

}

The Shared Module:

import { CommonModule } from '@angular/common';
import { NgModule} from '@angular/core';
import { EmptyPipe } from './pipes/empty.pipe';

@NgModule({
  imports: [CommonModule],
  declarations: [EmptyPipe],
  exports: [EmptyPipe, CommonModule]
})
export class SharedModule {
}

How I import it in the component i want to use it in:

import { SharedModule } from '../shared/shared.module';

How I try to use it:

{{companyList.earliest | empty}}

The error:

The pipe 'empty' could not be found
3
angularpipe
please share your'e module as well, you probably forgot to import or export the pipe – Or Yaacov
please share your module code as well – Faizal Hussain
did you try adding it as imports:[haredModule.forRoot()] – Faizal Hussain

3 Answers

0
votes

You do not need to import a pipe to your component, if you have multiple modules, add shared module to the imports of modules where you want to use your pipe. Then simply use it in your templates without any extra effort.

0
votes

If you are using lazy loding routes and in lazy loded routes you are going to use that routes than declare that route in that lay loded module file. I faced this problem too so declaare in that respected module and problem will be solved

0
votes

I have provided custom pipe in root, which is usable throughout the application, by decorating it with as given below.

@Injectable({
  providedIn: 'root'
})

Don't forget to export custom pipe in share module.