Base class for component with a decorated method is not being picked up in the component that...

I'm using this code in my component to have a confirmation before the user refreshes the page, to avoid losing changes by mistake:

@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
if (!this.canDeactivate()) {
$event.returnValue = '';
$event.preventDefault();
}
}


To avoid duplicating that code in other components I wanted to create a base class like

@Injectable()
export abstract class ComponentCanDeactivate {
abstract canDeactivate(): boolean;

@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
if (!this.canDeactivate()) {
$event.returnValue = '';
$event.preventDefault();
}
}


but now the components extending this base class, don't seem to be listening to the beforeunload event. Is the decorator not being picked by Angular because it is on the base class? I see this work in this: example using angular 11, and I'm using angular 13. don't know if that changed the behavior or if I'm missing something

Continue reading...