What is the best way to incorporate this in a callback function?

Question

What is the best way to incorporate this in a callback function?

Utilizing a third-party component requires creating an object for configuration, such as itemMovementOptions in the given code sample.

export class AppComponent implements OnInit {
    readonly itemMovementOptions = {
      threshold: {
        horizontal: 25,
        vertical: 25,
      },
      events: {
        onMove({ items }) {
          for (let i = 0, len = items.after.length; i < len; i++) {
            const item = items.after[i];
            if (!this.canMove(item)) return items.before;
          }
          return items.after;
        },
      },
    };

    public canMove(item) {
       // ...
    }

    readonly config = {
        ItemResizing(this.itemResizeOptions),
        ItemMovement(this.itemMovementOptions),
    }

    ngOnInit(): void {
      GSTC.api.stateFromConfig(this.config);
    }
}

The issue arises when the code is executed and 'this' does not reference AppComponent, causing it to fail to find the method canMove().

I need help overcoming this problem. I must use canMove at multiple places without duplicating code or putting it into the callback.

angular typescript this

Answer 1

Answer №1

this concept can be tricky for those new to JavaScript:

With regular functions, the value of this is determined by the call context.
Arrow functions bind the value of this at the time of creation, not when invoked.

Consider the following example:

class AppComponent  {
  onMoveFunction() {
    console.log("From onMoveFunction", this);
  }

  onMoveArrow = () => {
    console.log("From onMoveArrow", this);
  }
}

const c = new AppComponent();
const callbackFunction = c.onMoveFunction
const callbackArrow = c.onMoveArrow

c.onMoveFunction() // "From onMoveFunction",  AppComponent: {} 
c.onMoveArrow()    // "From onMoveArrow",  AppComponent: {} 
callbackFunction() // "From onMoveFunction",  undefined 
callbackArrow()    // "From onMoveArrow",  AppComponent: {}

Another approach is to utilize bind().

For further reading:

Answer 2

this concept can be tricky for those new to JavaScript:

With regular functions, the value of this is determined by the call context.
Arrow functions bind the value of this at the time of creation, not when invoked.

Consider the following example:

class AppComponent  {
  onMoveFunction() {
    console.log("From onMoveFunction", this);
  }

  onMoveArrow = () => {
    console.log("From onMoveArrow", this);
  }
}

const c = new AppComponent();
const callbackFunction = c.onMoveFunction
const callbackArrow = c.onMoveArrow

c.onMoveFunction() // "From onMoveFunction",  AppComponent: {} 
c.onMoveArrow()    // "From onMoveArrow",  AppComponent: {} 
callbackFunction() // "From onMoveFunction",  undefined 
callbackArrow()    // "From onMoveArrow",  AppComponent: {}

Another approach is to utilize bind().

For further reading:

Answer 3

Answer №2

When it comes to the content of your canMove() function, there are two options available:

If the canMove() function does not have any references to this within its logic, meaning it is independent of the class or component it resides in, like this example:

app.component.ts
```
canMove(item): boolean {
  return item.canMove;
}
```
In such cases, the function can be made static and referenced as shown below:

app.component.ts
```
static canMove(item): boolean {
  return item.name;
}

...
if (!AppComponent.canMove(item)) return items.before;
...
```
Please note that this approach also applies if the function is located outside the component class, for instance:

utilities.ts
```
class Utilities {
  static canMove(item): boolean {
    return item.name;
  }
}
```
app.component.ts
```
...
if (!Utilities.canMove(item)) return items.before;
...
```
On the other hand, if the canMove() function does contain references to this, indicating its dependency on some class/component content, like in this example:

app.component.ts
```
canMove(item): boolean {
  return item.canMove && this.canMoveOverride;
}
```
In such situations, the originating class context needs to be provided to the function when referencing it so that all necessary this. variables (defined in AppComponent) are accessible. This can be achieved using the .bind() method (docs)

app.component.ts
```
...
if (!this.canMove(item).bind(this)) return items.before;
...
```

Answer 4

When it comes to the content of your canMove() function, there are two options available:

If the canMove() function does not have any references to this within its logic, meaning it is independent of the class or component it resides in, like this example:

app.component.ts
```
canMove(item): boolean {
  return item.canMove;
}
```
In such cases, the function can be made static and referenced as shown below:

app.component.ts
```
static canMove(item): boolean {
  return item.name;
}

...
if (!AppComponent.canMove(item)) return items.before;
...
```
Please note that this approach also applies if the function is located outside the component class, for instance:

utilities.ts
```
class Utilities {
  static canMove(item): boolean {
    return item.name;
  }
}
```
app.component.ts
```
...
if (!Utilities.canMove(item)) return items.before;
...
```
On the other hand, if the canMove() function does contain references to this, indicating its dependency on some class/component content, like in this example:

app.component.ts
```
canMove(item): boolean {
  return item.canMove && this.canMoveOverride;
}
```
In such situations, the originating class context needs to be provided to the function when referencing it so that all necessary this. variables (defined in AppComponent) are accessible. This can be achieved using the .bind() method (docs)

app.component.ts
```
...
if (!this.canMove(item).bind(this)) return items.before;
...
```

What is the best way to incorporate this in a callback function?

Answer №1

Answer №2

Similar questions

Obtaining the component instance ('this') from a template

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

What is the best way to combine an Angular project with an existing Node.js project?

Component declaration in Typescript is being rejected due to the union type not being accepted

String defines the type

How can you merge arrays in Angular based on their unique names?

Limit the category to a specific subset of strings

I'm having trouble linking MikroORM migration to Postgresql - the npx command keeps failing. Can anyone offer some guidance on what

Why are polyfills-es2015, vendor-es2015, main-es2015, and other files blocked from loading because the MIME type is not allowed (text/html

Getting the parent from a child in Typescript: Best Practices

Personalized context hook TypeScript

Watching multiple Angular libraries for changes and serving to a separate application on the go

Having trouble locating modules or properties with ANTLR4 TypeScript target?

The element in the iterator in next.js typescript is lacking a necessary "key" prop

The incorrect type is being assigned to an array of enum values in Typescript

Currently, I am working on integrating the ngx-bootstrap datepicker feature into my project

The parameter "path" must be a string type. Instead, we received type undefined. This issue is specific to Ionic 4 on Windows

Using TypeScript with knockout for custom binding efforts

Ionic JavaScript function runs independently of promise resolution

Learn how to resubscribe and reconnect to a WebSocket using TypeScript