Angular — Utilizing custom pure pipe to improve performance

Liu Ting Chun
4 min readNov 12, 2020

Pipe is a powerful feature in Angular to achieve data transformation in templates.

@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
transform(value: string): string {
return value.trim();
template: `{{ value | trim }}`,
export class AppComponent {...}

However, not many Angular developers like working with custom pipe due to the fact that it is more heavy weighted than a static Util class, with more codes to write, classes…



Liu Ting Chun

Web developer from Hong Kong. Most interested in Angular and Vue. Currently working on a Nuxt.js + NestJS project.