New to Kendo UI for Angular? Start a free 30-day trial

Change the Context of a Function

Environment

ProductProgress® 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:

Using the bind Function

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

public constructor() {
    this.itemDisabled = this.itemDisabled.bind(this);
}
Example
View Source
Change Theme:

Using an Arrow Function

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

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