I'm facing an issue with implementing debounce click on a dynamically added button using TypeScript. I need help with the correct syntax to make it work.
private _initActionsFooter(): void {
this.actionsFooterService.add([
{
label: 'AMBUSH.SHARED.FOOTER.HISTORY',
click: () =>
this.dialogService.open(DialogHistoryAmbushComponent, {
context: {ambush: this.ambush}
}),
outline: true,
position: 'left',
class: ['mr-3']
},
{
label: 'AMBUSH.SHARED.FOOTER.DOCUMENTS',
click: () => {
this.router.navigate([
'appostamenti',
this.route.snapshot.data.ambush.id,
'documenti'
]);
},
outline: true,
position: 'left',
class: ['ml-3']
},
{
label: 'AMBUSH.SHARED.FOOTER.REFRESH',
click : () => this._save,
disabled:
this.accessChecker.isGranted('view', 'only-view-atc') ||
this.ambushTabsStoreService.allFormsInvalid$,
position: 'center',
icon: 'save-outline',
}
]);
if (this.ambush?.fixedCabinOverId) {
this.service
.getDetail(this.ambush.fixedCabinOverId)
.pipe(
catchError(() => {
return of(null);
})
)
.subscribe((res: Ambush) => {
this.cancellationReason = res.cancellationReason.value;
});
}
}These are the buttons, specifically interested in utilizing the function for the button labeled 'AMBUSH.SHARED.FOOTER.REFRESH'
This is my directive file which has been made accessible throughout the application
import {
Directive,
EventEmitter,
HostListener,
OnInit,
Output
} from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit {
@Output() debounceClick = new EventEmitter();
private clicks = new Subject();
constructor() {}
ngOnInit() {
this.clicks
.pipe(debounceTime(500))
.subscribe(e => this.debounceClick.emit(e));
}
@HostListener('click', ['$event'])
clickEvent(event) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
}