Angular 2+ use Alertifyjs ERROR TypeError: Cannot read property

Question

declare var alertify:any;
export class ExamplComponent implements OnInit {
    itemList = []

    deleteItem(idx) {
    alertify.confirm('Are you sure delete this record.', function() {
      this.itemList.slice(idx,1);
    })
  }
}

html Page

< div *ngFor="let item of itemList;let indx = index" style="text-align: center">
    <button class="text-btn text-danger" (click)="deleteItem(indx)" ><i class="fa fa-trash"></i></button>
</div>

Source Library: https://alertifyjs.com/confirm.html

Error Message

ERROR TypeError: Cannot read property 'itemList' of undefined

Krishna Rathore · Accepted Answer · 2018-08-21 11:12:26Z

1

use fat arrow => instead of function

deleteItem(idx) {
    alertify.confirm('Are you sure delete this record.', ()=> {
      this.itemList.slice(idx,1);
    })
}

answered Aug 21, 2018 at 11:12

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lenilsondc · Accepted Answer · 2018-08-21 11:13:41Z

1

The problem is on the function passed as argument to alertify.confirm(). In this case when you declare a function using function() it has its own this; therefore, when you code this.itemList you are pointing to undefined as it doesn't exist on your function.

Try to use arrow function instead (() => {}), they inherit the this from the current scope, so it is safe to use within a callback.

deleteItem(idx) {
    alertify.confirm('Are you sure delete this record.', () => {
      this.itemList.slice(idx, 1)
    })
}

answered Aug 21, 2018 at 11:13

lenilsondc

9,8453 gold badges27 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular 2+ use Alertifyjs ERROR TypeError: Cannot read property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related