Change the Context of a Function

Environment

Product

Progress® Kendo UI for Angular

Description

I am unable to access the current properties of the Angular component by using the this keyword from within a function that is passed to an input property of any Kendo UI for Angular component.

Cause

The reason for this behavior is that the function has its own context which is different from the current Angular component.

Solution

To handle this issue, use any of the following approaches:

• Use the bind function
• Use an arrow function

Using the bind Function

To change the context to which this points, use the JavaScript bind() function.

ts

public constructor() {
    this.itemDisabled = this.itemDisabled.bind(this);
}

Change Theme

Theme

Loading ...

Using an Arrow Function

Alternatively, you can use an arrow function that doesn't have its own binding of this.

ts

public itemDisabled = (itemArgs: { dataItem: string; index: number }): boolean => {
    console.log(this.listItems);
    return itemArgs.index === 2;
}

Change Theme

Theme

Loading ...