Skip to content

Instantly share code, notes, and snippets.

View AbuzerAsif's full-sized avatar
😃
Writing Code and Having Fun :)

Abuzer Asif AbuzerAsif

😃
Writing Code and Having Fun :)
  • 127.0.0.1
View GitHub Profile
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myCustomPipe'
})
export class MyCustomPipe implements PipeTransform {
transform(value:number, param1?:any, param2?:any):number {
return (value * param1) / param2; // returns 50
}
}
<h1>{{ 100 | myCustomPipe: 5: 10 }}</h1> // Output: 50
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myCustomPipe'
})
export class MyCustomPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value;
}
}
<h1>{{ 'Hello world' | myCustomPipe }}</h1> // Output is empty
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myCustomPipe'
})
export class MyCustomPipe implements PipeTransform {
transform(value: any, args?: any): any {
return null;
}
}
<h1>{{ 500 | currency : 'GBP' }}</h1> // Output: £500
@AbuzerAsif
AbuzerAsif / angular-custom-pipes-4.html
Last active April 3, 2019 11:18
Angular Custom Pipes and How it works
<h1>{{ 500 | currency }}</h1> // Output: $500
@AbuzerAsif
AbuzerAsif / angular-custom-pipes-3.html
Last active April 3, 2019 11:18
Angular Custom Pipes and How it works
<h1>{{ 'Hello world' | titlecase }}</h1> // Output: Hello World
@AbuzerAsif
AbuzerAsif / angular-custom-pipes-2.html
Last active April 3, 2019 11:18
Angular Custom Pipes and How it works
<h1>{{ 'Hello world' | lowercase }}</h1> // Output: hello world
@AbuzerAsif
AbuzerAsif / angular-custom-pipes-1.html
Last active April 3, 2019 11:14
Angular Custom Pipes and How it works
<h1>{{ 'Hello world' | uppercase }}</h1> // Output: HELLO WORLD