I'm trying to create a directive for 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.
I would work around it like this:
@Directive({
selector: '[confirm]'
})
export class ConfirmDirective {
@Output('confirm-click') click: any = new EventEmitter();
@HostListener('click', ['$event']) clicked(e) {
$.confirm({
buttons: {
confirm: () => this.click.emit(),
cancel: () => {}
}
});
}
}
your html should look like:
<a (confirm-click)="delete(menu)" class="btn" confirm>Delete</a>
You can actually combine directive name and output together.
<button class="btn" (confirm)="delete()">delete</button>
@Directive({
selector: '[confirm]'
})
export class ConfirmDirective {
@Output() confirm = new EventEmitter<any>();
constructor(private el: ElementRef) {
}
@HostListener('click')
onClick() {
$.confirm({
buttons: {
confirm: () => this.confirm.emit()
}
});
}
}