How to set onhashchange in angular component

Question

I am not able to set onhashchange property using angular 4, i tried to set onhashchange in the following life cycle of the angular 4 but it is not working.

ngAfterContentInit

  ngAfterContentInit() {
    //disabling browser back button
    window.location.hash = "lienholder-details";
    window.location.hash = "Again-lienholder-details";//again because google chrome don't insert first hash into history
    window.onhashchange = function () { window.location.hash = "lienholder-details"; }
  }

ngOnInit

ngOnInit(){
 //disabling browser back button
        window.location.hash = "lienholder-details";
        window.location.hash = "Again-lienholder-details";//again because google chrome don't insert first hash into history
        window.onhashchange = function () { window.location.hash = "lienholder-details"; }
}

how to set the onhashchange property in angular 4

score 2 · Answer 1 · answered Sep 28 '17 at 06:28

2

@HostListener('window:hashchange', ['$event'])
hashChangeHandler(e) {
  window.location.hash = "lienholder-details";
}

or if you are using the router

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

(see also https://stackoverflow.com/a/38080657/217408)

answered Sep 28 '17 at 06:28

Günter Zöchbauer

623,577
216
2,003
1,567

i have a home component and a display component, i want to deactivate the back button only in the display component not on the home component, how can i do it – Lijin Durairaj Sep 28 '17 at 06:31
I'd try checking the URL and if it points to the display component, and then call `e.preventDefault();` (not verified if this works) – Günter Zöchbauer Sep 28 '17 at 06:33
dont the angular 4 has a lifecycle which will run after all the window loads gets completed? – Lijin Durairaj Sep 28 '17 at 06:37
Not sure why you think that is related to the problem, and no, Angular doesn't have something like that. There is no clear point when "everything is loaded". – Günter Zöchbauer Sep 28 '17 at 06:53
ok thanks i actually tried the ngAfterViewChecked event and it is working, thanks for your help – Lijin Durairaj Sep 28 '17 at 07:00
2

`ngAfterViewChecked` might be called multiple times. – Günter Zöchbauer Sep 28 '17 at 07:06

score 0 · Answer 2 · answered Sep 28 '17 at 07:00

0

I used ngAfterViewChecked event and i am able to set onhashchange property

answered Sep 28 '17 at 07:00

Lijin Durairaj

3,341
11
31
50

How to set onhashchange in angular component

2 Answers2