How to pass typescript property to bootstrap related jQuery function in Angular Application

this.addRoleFormGroup.dirty; //want to pass this value to jQuery on("hide.bs.modal", function())

this.addRoleFormGroup.dirty;
    $("#addRoleModal").on("hide.bs.modal", function () {
      alert('The modal is about to be hidden.');
      $('#addRoleModal').modal('show');
    });
  }

>Solution :

Use an arrow function for your JQuery event handler. That way the outer this will be accessible from within the callback:

$("#addRoleModal").on("hide.bs.modal", () => {
    console.log(this.addRoleFormGroup.dirty);
    $('#addRoleModal').modal('show');
});

See here for more information.