Angular 6 Custom Pipe | with Parameterizing a pipe | Angular Pure pipes + Impure pipes

angular-6-custom-pipe-with-parameterizing-a-pipe-angular-pure-pipes-impure-pipes-feature-image

In the tutorial, we show how to create an Angular Custom Pipe with Angular Pure Pipe, and Angular Impure Pipe.

Related posts:
Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
How to Integrate Bootstrap with Angular (Angular 6)
Angular 6 Component – How to create & integrate New Angular 6 Component
Angular NgFor Repeater Directive – Loop over a Collection (Angular 6)

Related pages:

Custom Pipe

We can write our own custom pipes.

Example: create a pipe that calculates a logarithm of a number with the base value.
->

– The @Pipe decorator allows you to define the pipe name that you’ll use within template expressions.
PipeTransform interface’s transform method that accepts an input value followed by optional parameters and returns the transformed value.
->

We must include custom pipe in the declarations array of the AppModule
->

Now we create a baselog component to use above custom pipe logbase ->

baselog.component.ts ->

baselog.component.html ->

-> result:

angular-6-custom-pipe-with-parameters

Pure Pipe and Impure Pipe

Problem

Follow the above custom pipe, we create a even pipe to filter even numbers in a given number array.
->

Now we create an evenums component that uses even :
evennums.component.ts ->

evennums.component.html ->

Results:
– Inital state -> it works well:

angular-6-custom-pipe-pure-pipe-start

– Add an even -> even pipe does NOT work well.

angular-6-custom-pipe-pure-pipe-problems

-> Why?
We can find all solutions in below sessions Pure & Impure pipes. Let’s go ->

Pure Pipe

Angular has 2 kinds of pipe: pure & impure.
In Angular, Pure is default pipe.

– Angular executes a pure pipe only when it detects a pure change to the input value.
– A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

That is the reason, we got the above problems, even pipe does NOT work.
We use push method to add new number to exist array:
this.nums.push(number);
-> So the reference of array did NOT change. Then pure even pipe did NOT work.

How to fix it?
Solution -> change the array referene when adding a new item, see below code:

this.nums = this.nums.concat(number);

-> Test:

angular-6-custom-pipe-pure-pipe

It works well now! -> Congratulation!!!

Have other solution? -> We can use impure pipe with below session.

Impure Pipe

An impure pipe is called often because Angular executes an impure pipe during every component change detection cycle.
-> Must more take care about performance for user experience when using impure pipe because it is expensive, long-running.

How to implement an Angular impure pipe?
-> The same ways that we had developed a custom pipe (pure pipe). The only difference point is the pure: false flag.

Now we implements an evenImpurePipe pipe ->

Don’t forget to include evenImpurePipe pipe in the declarations array of the AppModule ->

– Change the style of evennums component as below:

– Implement addNumber with push method:

Results -> It works well:

angular-6-custom-pipe-impure-pipe

SourceCode

Project Structure ->

angular-6-custom-pipe-project-structure

Results ->

angular-6-custom-pipe-successfully-result

SourceCode ->

AngularCustomerPipe

By grokonez | September 1, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*