I'm trying to create a directive for [jQuery Confirm](https://craftpip.github.io/jquery-confirm/) in Angular 4. However, I'm having a hard time stopping binded events happening. Here is my structure:

**menus.component.html:**

```
<a (click)="delete(menu)" class="btn" confirm><i class="icon-trash"></i></a>

```

**menus.component.ts:**

```
delete(menu: Menu): void {
    this.menuService.delete(menu.id)
        .subscribe(
            error =>  this.errorMessage = <any>error);
}

```

**confirm.directive.ts:**

```
import {Directive, ElementRef, Input} from '@angular/core';

@Directive({ selector: '[confirm]' })
export class ConfirmDirective {
    constructor(el: ElementRef) {
        $(el.nativeElement).on('click', function () {
            $(this).confirm({
                confirm: function () {
                    return true;
                }
            });

            return false;
        });
    }
}

```

Confirmation box does appear, but the event is fired before it, so it is useless. I want this directive to stop an event from firing, fire it if the action is confirmed, cancel it otherwise.