39

Is there a difference between using a pipe and a method in template interpolation in an Angular application?

For example:

<h1>{{ name.toLowerCase() }}</h1> vs <h1>{{ name | lowercase }}</h1>

In terms of performance, is there a real gain or is it just personal preference?

I know that calling methods in your template will generally slow performance due to Angular constantly checking to see whether or not its execution has changed anything. Most of the time, I'd use a computed property on my component.

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
User 5842
  • 2,849
  • 7
  • 33
  • 51
  • 2
    Not sure about performance so I can't answer your question but pipes are typically global and therefore reusable. They save you having to write the same functions on every component. – Brad Jan 18 '18 at 23:55

2 Answers2

42

TL;DR; Don't use functions or methods in the template, use pipes instead.

A pipe would be called only when input values change. A function or a method would be called on every change detection. Here is a nice article if you want to know more about functions in template.

Here is a running stackblitz demonstration of method vs pipe.

ibenjelloun
  • 7,425
  • 2
  • 29
  • 53
8

Please read documentation about pipes paying attention to such called "pure" and "impure" pipes. That should address the question about the performance for pipes.

Calling a function like this

{{ name.toLowerCase() }}

depends of a function itself. In this specific case I think it is the same as pipe, but pipes where specifically created for that purpose.

Arttu
  • 351
  • 2
  • 14
  • 3
    you can also reference that article in your answer [The essential difference between pure and impure pipes in Angular and why that matters](https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068) – Max Koretskyi Jan 19 '18 at 06:05
  • updated link: [The essential difference between pure and impure pipes in Angular and why that matters](https://indepth.dev/posts/1061/the-essential-difference-between-pure-and-impure-pipes-in-angular-and-why-that-matters) – Ollie Jan 10 '22 at 03:11