title: Using angular pipe globally
body: <p>I am working on Ionic project with angular, I need to use pipe for almost all my pages but I am getting errors:</p>
  
  <h1>Logic</h1>
  
  <ol>
  <li>If I use <code>declarations</code> in one of my pages pipe works just fine</li>
  <li>If I add same <code>declarations</code> in another page it returns error that
  this pipe has been used twice and I might consider using upper
  module.</li>
  <li>If I add my pipe to <code>app.module.ts</code> file and try to access it in my pages it says pipe not found!</li>
  </ol>
  
  <p><strong>Any idea how to get my pipe globally?</strong></p>
  
  <h1>Code</h1>
  
  <p><code>app.module.ts</code></p>
  
  <pre><code>import { KeepHtmlPipe } from './pipes/keep-html.pipe';
  
  @NgModule({
    declarations: [AppComponent, KeepHtmlPipe],
    entryComponents: [],
    imports: [
      HttpClientModule,
      FormsModule,
      CommonModule,
      ReactiveFormsModule,
      BrowserModule,
      IonicModule.forRoot(),
      AppRoutingModule,
      VariationsPageModule
    ],
    providers: [
      StatusBar,
      SplashScreen,
      LaunchReview,
      NativeStorage,
      ImagePicker,
      Camera,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p><code>pipe</code></p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Pipe({
    name: 'keepHtml'
  })
  export class KeepHtmlPipe implements PipeTransform {
  
    constructor(private sanitizer: DomSanitizer) {
    }
  
    transform(content) {
      return this.sanitizer.bypassSecurityTrustHtml(content);
    }
  }
  </code></pre>
  
  <p><code>usage in html files</code></p>
  
  <pre><code>&lt;div [innerHTML]="product.stars | keepHtml"&gt;&lt;/div&gt;
  </code></pre>
  
  <h1>Update</h1>
  
  <p>based on answers I've made new file <code>pipes.module.ts</code></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { KeepHtmlPipe } from './keep-html.pipe';
  
  @NgModule({
      declarations: [
          KeepHtmlPipe
      ],
      imports: [],
      exports: [
          KeepHtmlPipe
      ]
  })
  </code></pre>
  
  <p>Then add it to my <code>app.module.ts</code></p>
  
  <pre><code>import { PipesModule } from './pipes/pipes.module';
  
  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
      HttpClientModule,
      FormsModule,
      CommonModule,
      PipesModule, //here
      ReactiveFormsModule,
      BrowserModule,
      IonicModule.forRoot(),
      AppRoutingModule,
      VariationsPageModule
    ],
    providers: [
      StatusBar,
      SplashScreen,
      LaunchReview,
      NativeStorage,
      ImagePicker,
      Camera,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>And in my pages I add this:</p>
  
  <pre><code>import { KeepHtmlPipe } from 'src/app/pipes/keep-html.pipe';
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      ReactiveFormsModule,
      IonicModule,
      RouterModule.forChild(routes)
    ],
    declarations: [FavoritesPage, KeepHtmlPipe], //here
    exports: [
      KeepHtmlPipe //and here
    ]
  })
  export class FavoritesPageModule {}
  </code></pre>
  
  <p>Now I'm getting this error:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: Type KeepHtmlPipe is part of the declarations of 2 modules: PipesModule and FavoritesPageModule! Please consider moving KeepHtmlPipe to a higher module that imports PipesModule and FavoritesPageModule. You can also create a new NgModule that exports and includes KeepHtmlPipe then import that NgModule in PipesModule and FavoritesPageModule.
  </code></pre>