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!

Solution

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.

Comments

[FrancescoMussi]

Thanks for the answer. What do you mean to delete one ngModule. One is the general one and I cannot delete... And the other is the one that 'should' allow me to import the pipe only locally.

[FrancescoMussi]

Btw I am sorry there was a typo in my plunkr.. I fixed it in both - mine and your - so now in your plunkr we can properly see the list