0

As part of one of the requirements, I need to find if user have pending changes and if he hit back button or hit refresh then need to alert. We are using canDeactivate angular guard to prevent on the single page but we need to do it across all the pages. Hence we are looking for reusable code for all pages. we are exploring it achieving via directive. Any suggestion here much appreciated. Below is our current code for single page check.

 @HostListener('window:beforeunload')
 canDeactivate(): boolean | Observable<boolean> 
  {
  return (
  (!this.NameFormControl.dirty)
  }
Mukesh
  • 53
  • 6
  • why do you use a HostListenenr, a guard should be used in the routing module... – Random Jun 23 '23 at 10:06
  • @Random agree. I am just doing R&D We have been using in routing . Any suggestion on how I can make resuable code in directive or other way to detect changes? – Mukesh Jun 23 '23 at 10:30
  • Actually, all you have to do is to make a class with this method, and any component may extend it. – Random Jun 23 '23 at 12:08

0 Answers0