Tutorial-6 Pipes
Pipes
We describe Angular Pipes as it provides a way to format the Data in your html template, without putting a lot of efforts in your program for displaying some data in some specific format angular gives us power of Pipes. Pipes can be used within the Interpolation Expression for showing the formatted output.
We use Pipe Operator i:e : I for availing the pipe facility, followed by the required pipe name.
Syntax : {{dataModel | pipe name}}
Ex : <p>Date of joining is{{joinDate | date}}</p>
Parameterized Pipe:
Pipes can take further formatting options with the help of parameters, parameters are represented by : (Colon) and placed after the pipe names.
Syntax: {{dataModel | pipe name:parameter}}
Ex : <p>Date of joining is{{joinDate | date:”MM/dd/YYYY”}}</p>
Demonstrating uppercase and lowercase pipes
App.cpmponent.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component
(
{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}
)
export class AppComponent {
title:string;
author:string;
about:string;
constructor(){
this.title = "Angular Cooking";
this.author = "Er. BiswaRanjan Samal";
this.about = "Tell something more about Author..."
}}
|
App.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<div>
<h2>Author Name: {{author}}</h2> <!--Binding with Interpolation -->
<h3>Also Known as LazyEasy BRS...</h3>
<input type="text" [(ngModel)]="about">
<h2>About in UpperCase: {{about | uppercase}}</h2>
<h2>About in LowerCase: {{about | lowercase}}</h2>
</div>
|
Output
Fig1 Demonstrating the use of uppercase and lowercase pipes
Custom Pipe
We can also develop our own customized pipes by implementing the PipeTransform Interface.
We are going to develop a Custom Pipe and name it as TextElipses, which will append ellipses after a certain length of the text. This pipe can be used where there is so much of texts but a few to be shown from UI perspective.
Ex :
Input: BRS is a good boy
Output: BRS is a good…
Note: This pipe also takes an optional parameter of type number, which will indicate after how much text ellipses will append.
Text-ellipses.pipe.ts
import { Pipe, PipeTransform} from '@angular/core';
@Pipe({name:'textEllipses'})
export class TextEllipsesPipe implements PipeTransform{
transform(value: any, textLength:number): string {
try {
let text = value;
if(value.length > 10){
text = value.trim().substr(0, isNaN(textLength)?10:textLength) +"...";
}
return text;
} catch (error) {
throw new Error("Some Error Occured while Procerssing the TextEllipses Pipe..."+error);
}
}
}
|
Text-asterik.pipe.ts
import { Pipe, PipeTransform} from '@angular/core';
@Pipe({name:'textAsterik'})
export class TextAsterikPipe implements PipeTransform{
transform(value: string, startIndex:number, endIndex:number): string {
try {
var text:string = value;
if(text != "" && text.length > startIndex && text.length > endIndex && endIndex > startIndex && endIndex != startIndex){
let partText = text.substr(startIndex, endIndex);
var star="";
for(var i = 0; i <= (endIndex-startIndex); i++){star += "*";}
text = text.replace(partText, star);
}
return text;
} catch (error) {
throw new Error("Some Error Occured while Procerssing the textAsterik Pipe..."+error);
}
}
}
|
App-component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component
(
{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}
)
export class AppComponent {
title:string;
author:string;
about:string;
constructor(){
this.title = "Angular Cooking";
this.author = "Er. BiswaRanjan Samal";
this.about = "Tell something more about Author..."
this.mobileNo = "7205284238";
}
}
|
App.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<div>
<h2>Author Name: {{author}}</h2> <!--Binding with Interpolation -->
<h3>Also Known as LazyEasy BRS...</h3>
<label>Enter your text:</label><input type="text" [(ngModel)]="about">
<h2>Output of TextEllipses: {{about | textEllipses:15}}</h2>
<label>Enter your text:</label><input type="text" [(ngModel)]="mobileNo">
<h2>Output of TextAsterik: {{mobileNo | textAsterik:1:3}}</h2>
</div>
|
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TextEllipsesPipe } from "app/text-ellipses.pipe";
import { TextAsterikPipe } from "app/text-asterik.pipe";
@NgModule({
declarations: [
AppComponent,
TextEllipsesPipe,
TextAsterikPipe
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
Info: Pipe name should be imported in app.module.ts .
Output:
Fig2 Demonstrating custom pipe for textEllipses and textAsterik
<-- Prev(Lifecycle Hooks) Tutorial Home Next -->
<-- Prev(Lifecycle Hooks) Tutorial Home Next -->
Comments
Post a Comment