Angular — Why you should (and how to) avoid Function.prototype.bind in template

Liu Ting Chun
3 min readOct 27, 2020

Function.prototype.bind is a built-in function, which creates a new function with the context bound to the context given from the parameter. The major use case for this function in Angular template is the property binding (@Input) of function.


This helps to maintain the context scope when the function is executed inside the component. It is a relatively uncommon function nowadays that some Angular developers may not have even seen it before. Yet, if you have been using it in your templates, I highly recommend you to stop doing that as it leads to performance issue.

Image from SecurEdge

The Issue

In short, the root problem is that function calls in template are not friendly to the Angular change detection mechanism. Each time change detection is triggered, all the function calls in template will always be re-executed, which includes Function.prototype.bind. For a more detailed explanation, please check out another article I have written previously:

As Function.prototype.bind is a relatively slow function, it can become a performance killer very easily. Here is a simple example to demonstrate the issue. To begin with, we modify the built-in function to add a log, such that we know when it is called:

let calledTimes = 0;
const originalBind = Function.prototype.bind;
value: function bind(context) {
console.log(`bind called ${++calledTimes} times`);
return originalBind.apply(this, arguments);

Next, we create a simple component which is capable of accepting a Function property:

selector: 'app-test-component',
template: `
<button (click)="testFunction()">Call function</button>
export class TestComponent {
testFunction = () => {};
Liu Ting Chun

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

Recommended from Medium


See more recommendations