Angular 2 - Import pipe locally

Question

THE SITUATION:

I need to use a pipe in only one component. For this reason i didn't wanted to import it globally but only in the component.

I have tried looking for reference on how to do it but couldn't find it.

This is my attempt:

THE PIPE:

when tested globally is working fine

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
    transform(value, args:string[]) : any 
    {
        let keys = [];      
        for (let key in value) 
        {
            keys.push({key: key, value: value[key]});
        }
        return keys;
    }
}

THE COMPONENT:

import { Component, NgModule } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {CommonModule} from "@angular/common";

import { KeysPipe } from './keys.pipe';


@Component({
  selector: 'page-attendees',
  templateUrl: 'attendees.html'
})

@NgModule({
  declarations: [ KeysPipe ],
  imports: [ CommonModule ],
  exports: [ KeysPipe ]
})

export class AttendeesPage {

    public attendeeList = [];
    public arrayOfKeys;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams
    ) {
        this.attendeeList = this.navParams.get('attendeeList');
        this.arrayOfKeys = Object.keys(this.attendeeList);
    }

    ionViewDidLoad() {
        console.log('AttendeesPage');
    }
}

THE ERROR:

Unhandled Promise rejection: Template parse errors:
The pipe 'keys' could not be found

PLUNKER:

https://plnkr.co/edit/YJUHmAkhAMNki2i6A9VY?p=preview

THE QUESTION:

Do you know what I am doing wrong or if I am missing something?

Thanks!

Answer 1

You declared two NgModules and your pipe was only declared in the second module. BUT your component was declared into the first module. That's why it couldn't find your pipe.

Here's an updated (and working version) of your Plunkr : https://plnkr.co/edit/P3PmghXAbH6Q2nZh2CXK?p=preview

EDIT 1 : Comparison

Here's what you had before (with non relevant code removed) :

@NgModule({
  declarations: [ KeysPipe ],
  imports: [ CommonModule ],
  exports: [ KeysPipe ]
})

@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let attendee of attendeeList | keys">
      {{ attendee.value.name }}
    </li>
  `,
})
export class App {
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

And here's the working version :

//our root app component
@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let attendee of attendeeList | keys">
      {{ attendee.value.name }}
    </li>
  `,
})
export class App {
}

@NgModule({
  imports: [ BrowserModule, CommonModule ],
  declarations: [ App, KeysPipe ],
  bootstrap: [ App ]
})
export class AppModule {}

Notice that you have 2 NgModules. I used only one, removed the other and I added the pipe into declarations.

Answer 2

You can define your pipe in the providers array in component, than declare it in your constructor and finally use it in the component.

import { Component, NgModule } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {CommonModule} from "@angular/common";

import { KeysPipe } from './keys.pipe';


@Component({
  selector: 'page-attendees',
  templateUrl: 'attendees.html',
  providers: [ KeysPipe ]
})

@NgModule({
  imports: [ CommonModule ],
})

export class AttendeesPage {

    public attendeeList = [];
    public arrayOfKeys;

    keys;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private keysPipe: KeysPipe 
    ) {
        this.attendeeList = this.navParams.get('attendeeList');
        this.arrayOfKeys = Object.keys(this.attendeeList);
        this.keys = this.keysPipe(this.arrayOfKeys, this.attendeeList)
    }

    ionViewDidLoad() {
        console.log('AttendeesPage');
    }
}