I want to create some constant pipes and import them all together in app.module.ts
.
It works when I use syntax like export const pipes = [MinValue, MaxValue]
, but does not work when I use export const pipes = _pipes
, it says that No pipe found with name 'MIN_VALUE'
.
The problem is that I want to put the logic of the same constant together, if I use the first approach, when there are a lot of constants in the file, I need to jump here and there when adding or removing constants. So, is it possible to make the second approach work?
constant.ts
:
import { Pipe, PipeTransform } from '@angular/core';
const _pipes = [];
@Pipe({ name: 'MIN_VALUE' })
export class MinValue implements PipeTransform {
transform = (v?: any) => 1;
}
_pipes.push(MinValue);
@Pipe({ name: 'MAX_VALUE' })
export class MaxValue implements PipeTransform {
transform = (v?: any) => 10;
}
_pipes.push(MaxValue);
export const pipes = _pipes; // <- this does not work
// export const pipes = [MinValue, MaxValue]; // <- this works
app.module.ts
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { pipes } from './constant';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent, ...pipes], // <- spread syntax here
bootstrap: [AppComponent],
})
export class AppModule {}