AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Pipes

Learn how to create pipes using the Ionic CLI and the files that make up a pipe.

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):

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.

Ask