Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Pipes

Understand how to generate and manage custom pipes in Ionic applications using the CLI. Learn how pipes filter and transform data in templates, how they integrate into the app module, and best practices for organizing pipe files for cleaner code management.

We'll cover the following...

As discussed previously, pipes are used to handle the filtering of data within our app template.

Creating new pipes

Pipes, when generated through the Ionic CLI, are automatically added to the application’s root module src/app/app.module.ts, like so (highlighted):

TypeScript 3.3.4
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { GalleryViewDirective } from './directives/gallery-view.directive';
import { SanitizerPipe } from './pipes/sanitizer.pipe';
@NgModule({
  declarations: [
    AppComponent,
    GalleryViewDirective,
    SanitizerPipe
  ],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule {}

As we previously saw when generating new page components and directives, a custom pipe can be generated to be organized by a specified directory or subdirectory.

For example, the SanitizerPipe in the code block above can be generated through the following command:

ionic g pipe pipes/sanitizer

Try copying the command into the terminal below to see the results for yourself.