angular pipes

 

pipes:-

convert data format from one format to another format

like string format case sensitive

currency change

locale formate

pipes can use in html file only

html file:

{{title |uppercase}}

{{title |lowercase}}

{{title}} 

today=date()//ts file

{{today |date}}

{{today |date :'fulldate'}}

we can do it :

in ts file:

capString(item:string){

return item.toUpperCase();

}

in html file:

{{capString(gaurav)}}

Advance pipes::

params with pipes:

{{title |slice :3}}

{{title |slice:3:6}}

2 pipes together

{{title |slice:3:6} |uppercase}

json pipe:

ts file

user={

name:'gaurav'

age:32

}

html file:

{{user|json|uppercase}}

hmtl:-

{{002000.2345 |number :'2:2-3'}}

{{002000.2345 |number :'3:2-3'}}

currency:

{{20 |currency:'USD'}}

currecy:'INR'}}

custom pipes:

ng g p Pipes/pipename

mypipe

import { Pipe, PipeTransform } from

 '@angular/core';

@Pipe({

  name: 'mypipe'

})

export class MypipePipe implements PipeTransform 

{

  transform(value: String,

 ...args: number[]): unknown {

    const [a]=args;

    // console.log(a);

    

    return value.slice(0,a);

  }

}

app.module.ts

import { MypipePipe } from './pipe/mypipe.pipe';

declaration[

MppipePipe

]

html file...

<h1>{{'goodmorning'|mypipe:2}}</h1>

<h1>{{'amarpal'|mypipe:4}}</h1>