CODEWITHSUNDEEP
angularperformance
User 5842
User 5842

Reputation: 3029

Methods vs pipes

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.

Upvotes: 45

Views: 15422

Answers (2)

ibenjelloun
ibenjelloun

Reputation: 7723

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.

Upvotes: 46

Arttu
Arttu

Reputation: 371

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.

Upvotes: 8

Related Questions