I want to create a dynamic pipe which I am going to call from the component.
import {Component, Pipe, PipeTransform} from 'angular2/core';
@Pipe({ name: 'filter', pure: false })
export class filter implements PipeTransform {
transform(value) {
this.items1=value;
this.ticket1 = [];
if (this.items1.length >0) {
for (var i = 0; i < this.items1.length; i++) {
this.ticket1.push(this.items1[i])
}
}
}
}
I want to call this pipe from the component.
You need to specify it within the pipes
attribute of your component
@Component({
pipes: [ filter ]
})
export class MyComponent {
(...)
}
and use it in your template:
{{someArray | filter}}
<div *ngFor="someArray | filter">(...)</div>
Edit
If you want to call the pipe directly within the component class, you need to instantiate it and call its tranform
method:
@Component({
(...)
})
export class MyComponent {
constructor() {
let filterPipe = new filter();
let arr = [ ... ];
var fiteredArr = filterPipe.transform(arr);
}
(...)
}
In version rc6 you need to register the pipes you want to use in a module -> declarations
@NgModule({
declarations: [
AppComponent ,
filter
]....
I just wanted to add to @pasha-oleynik answer. Angular 2+ including Ionic 2+ all expect the pipe to be declared in the module:
@NgModule({
declarations: [
AppComponent ,
filter
]
Also this is the only place that the pipe needs to be declared. There is no longer a pipe property under a module or component.
You need to register the pipes you want to use in a component:
@Component({
...
pipes: [filter],
template: `
<div *ngFor="let item of someData | filter">{{item}}</div>
`
...})
class SomeComponent {
someData = [ ... ];
}
@NgModule({
imports: [CommonModule],
declarations: [filter]
})
export class MyFilterModule()
To make the pipe available add the module to imports where you want to use it
@NgModule({
declarations: [AppComponent, SomeComponent],
imports: [BrowserModule, MyFilterModule]
})
export class AppModuleModule()
If you want to call the pipe from code
let f = new filter();
f.transform(value, filterArg);
In case you want to use your pipe on different modules several times, I suggest you aggregate all of your pipes into one module (e.g., PipesAggrModule
) and then import this module into the wanted module. For instance:
my-pipe.module.ts
@Pipe({name: 'MyPipe'})
export class MyPipe { ... }
pipes-aggr.module.ts
:
@NgModule({
imports: [
CommonModule
],
exports: [
...
MyPipe,
MyPipe2,
...
],
declarations: [..., MyPipe, MyPipe2, ...]
})
export class PipesAggrModule {}
Then, to use your pipes, simply import the import the PipesAggrModule
into the wanted module.
my.module.ts
@NgModule({
imports: [
CommonModule,
PipesAggrModule
],
...
}
export class MyModule {}