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!

Maybe reproduce within a Plunkr. I do not see anything weird so far. — maxime1992, Dec 05 '16 at 15:19

score 8 · Answer 1 · edited Dec 05 '16 at 17:55

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.

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, Dec 05 '16 at 16:13
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 — FrancescoMussi, Dec 05 '16 at 16:19

score 0 · Answer 2 · answered Feb 22 '18 at 15:39

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');
    }
}

Angular 2 - Import pipe locally

2 Answers2

Linked