Methods vs pipes

Question

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.

Answer 1

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.

Answer 2

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.