WEB DEVELOPER SITE
PYTHONJAVAPHP7
 

Angular 4 Pipes


In this chapter we learn about Angular 4 Pipes Syntex
{{ Welcome to Angular 4 | hello}}
The rules is integers, strings, arrays, and date as input separated with | to be converted in the format as required . In the app.component.ts file, we have defined the title variable
{{title | uppercase}}
{{title | lowercase}}
For make Angular 4 pipes we must follow-
  • Uppercasepipe
  • Lowercasepipe
  • Jsonpipe
  • Decimalpipe
  • Percentpipe


The following line of code will help us define the required variables in app.component.ts file −
import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate = new Date();
   jsonval = {name:'Sophie', age:'28', address:{a1:'Dallas', a2:'Texas'}};
   days = [ "Monday ", "Tuesday ", "Wednesday ", "Thursday", "Friday ", 
            "Saturday ", "Sunday "];
}

We will use the pipes in the app.component.html file.
<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe
      <b>{{title | uppercase}}
<h1>Lowercase Pipe <b>{{title | lowercase}} <h1>Currency Pipe <b>{{6589.23 | currency:"USD"}}
<b>{{6589.23 | currency:"USD":true}} //Boolean true is used to get the sign of the currency. <h1>Date pipe <b>{{todaydate | date:'d/M/y'}}
<b>{{todaydate | date:'shortTime'}} <h1>Decimal Pipe <b>{{ 258.78787814 | number: '3.4-4' }} // 3 is for main integer, 2-2 are for integers to be displayed. </div> <div style = "width:40%;float:left;border:solid 1px black;"> <h1>Json Pipe <b>{{ jsonval | json }} <h1>Percent Pipe <b>{{00.54565 | percent}} <h1>Slice Pipe <b>{{months | slice:2:6}} // here 2 and 6 refers to the start and the end index </div> </div>

Create a First Custom Pipe

we want to create the sqrt custom pipe app.sqrt.ts
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}