How to use Angular2 Pipe

Pipe can take data as input, then convert it and output it according to the rules. There are many built-in Pipes in Angular2, such as DatePipe, UpperCasePipe and CurrencyPipe. Here we mainly introduce how to customize Pipe.

1. Pipeline definition

The definition of Pipe is shown in the following code:

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

/*users: Array<any> = [
  { name: '1', id: 1 },
  { name: '2', id: 2 },
  { name: '3', id: 3 },
  { name: '4', id: 4 },
  { name: '5', id: 5 },
  { name: '6', id: 6 }
];*/

@Pipe({ name: 'filterUser' })
export class FilterUserPipe implements PipeTransform {
  transform(allUsers: Array<any>, ...args: any[]): any {
    return (user =>  > 3);
  }
}

As shown in the code,

1. You need to use @Pipe to decorate the class
2. Implement PipeTransform's transform method, which accepts an input value and some optional parameters
3. Specify the name of the pipe in the @Pipe decorator, and this name can be used in the template.

Note: When the definition is complete, don't forget to include this pipeline in the Module's declarations array.

2. Pipeline use

The implementation is as follows:

<div>
  <ul>
    <li *ngFor="let user of (users | filterUser)">
      {{}}
    </li>
  </ul>
</div>
<button (click)="addUser()"> add new user</button>

The implementation is as follows:

import { Component } from "@angular/core";

@Component({
  templateUrl: './',
})

export class EnvAppComponent {
  id = 7;
  users: Array<any> = [
    { name: '1', id: 1 },
    { name: '2', id: 2 },
    { name: '3', id: 3 },
    { name: '4', id: 4 },
    { name: '5', id: 5 },
    { name: '6', id: 6 }
  ];

  addUser() {
    ({ name: ++, id: ++ })
  }
}

Initialize data users and define a method to add user, using a custom pipeline filterUser.

When starting the application, you can find that only users with id greater than 3 are displayed. However, when you click the button to add the user, you find that there is no reaction and the data has not changed. Why is this?

3. Data change detection

In Angular2, pipelines are divided into two types: pure pipeline and non-pure pipeline. Pipes are pure pipes by default.

A pure pipe is to execute the pipe when Angular detects that a pure change in its input value has occurred. Pure change means that the original data type (such as String, Number, Boolean, etc.) or the reference of the object changes. The pipeline ignores changes inside the object. In the example, the reference to the array does not change, all the changes are the data inside the array, so when we add the data, it does not respond immediately on the page.

Non-pure pipelines are executed during the component's change detection cycle and are detected internal data of the object.

In our example, it is very simple to change the pipeline to a non-pure pipeline, just add the pure flag to false in the pipeline metadata.

The code looks like this:

@Pipe({ name: 'filterUser', pure: false })
export class FilterUserPipe implements PipeTransform {
  transform(allUsers: Array<any>, ...args: any[]): any {
    return (user =>  > 3);
  }
}

In this way, whenever we add a new user, the data will immediately respond on the page.

The pipe declared in the root module is valid in the page, while the template in the component referenced in the page is invalid, which is also what confuses me...

I sought some solutions, mostly to declare them in the root module, so I made an attempt to write the component into a functional module and declare the pipe in the component functional module. The result was very happy that the pipe in the component took effect.

Specific operation method:

Just create a new component function module and declare pipe in the modified module.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { myComponent } from '';
import { HelloPipe } from "";

@NgModule({
 declarations: [
  myComponent,
  HelloPipe
 ],

 imports: [
  (myComponent)
 ],

 exports: [
  myComponent
 ]
})

export class MyComponent {}

The work is done, and the component's template reference pipe takes effect.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.