python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 Pipes

Angular 4 Pipes - What Is Pipes? Why Use Pipes in Angular?

What Is Pipes in Angular?
Pipes transform displayed values within a template.” Sometimes, the data is not displays in the well format on the template that time where using pipes.

Pipe’s Key Points - Pipe class implements the “PipeTransform” interfaces transform method that accepts an input value and returns the transformed result.
There will be one additional argument to the transform method for each parameter passed to the pipe.

The “@Pipe” decorator allows us to define the pipe name that is globally available for use in any template in the across application.

Angular Built-in Pipes -
1.          DatePipe,
2.          UpperCasePipe,
3.          LowerCasePipe,
4.          CurrencyPipe,
5.          PercentPipe,
6.          JsonPipe,
7.          AsyncPipe,


Why Use Pipes in Angular?
Sometimes, your data is not displays in the correct format on the template that time where using pipes. You can also execute a function in the template to get its returned value.

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

@Pipe({
    name: 'barcode',
    pure: false
})
export class BarCodePipe implements PipeTransform {
    transform(value: string, args: any[]): string {
        if (!value) {
            return '';
        }
        return "****-****_" + (value.length > 8 ? (value.length - 8): '')
    }
}

What is Async Pipe? 
Angular provides us special kinds of pipe that is called Async Pipe and the Async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

The Async pipe allows us to bind our templates directly to values that arrive asynchronously manner and this is the great ability for the promises and observables.

Example as,

<div * ngFor="let user of users | async"> 
    Id- {{user.id }}, Name- {{user.name }}
</div>


Example 2 - Pipe

CREATE the Filter Pipe in Your Apps.
//filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  //Transform
  transform(items: any[], searchText: string): any[] {
    if(!items)
      return [];

    if(!searchText)
      return items;

    searchText = searchText.toLowerCase();

    return items.filter( ft => {
        return ft.toLowerCase().includes(searchText);
    });
   }
}

Declarations filter pipe in your app.module.ts -
//app.module.ts
import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponentfrom './app.component';
import { FilterPipe} from './filter.pipe';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, FilterPipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


Use the filter pipe in you HTML components-
//app.component.html
<h4>Search User -</h4>
<input [(ngModel)]="searchText" placeholder="Search..">
<div *ngFor="let user of users | filter : searchText">
    {{user}}
</div>



 I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions