Detecting Angular page change

Question

I am working with a third-party website that uses Angular.
I need to perform some actions when the user logs into the customer page, that means whenever the user goes from the log-in page, to his logged area. (Both are on the same website and use Angular).
This used to work before, since the actions happen on page reload, but since we are in an SPA, the page reload does not happen when the page changes.

My code lives on the page, but is not "inside" the Angular application and I have never used Angular before, so I only have visible to me the elements of the webpage that are global.

One way to solve the problem is to monitor the URL of the current page and detect when it changes from: https://somedomain/#/loginpage to https://somedomain/#/loggedArea using the window.location object:

 var previousHash; //This will store the hash of the page we were in before // Then we would have to constantly check if the URL has changed if(previousHash == "#/login" && window.location.hash == "#/loggedArea"){ callOnLoadActions() } 

but that seems a little brittle and hacky to me.

Is there an "official", or at least better way of listening to when the page gets updated?

Answer 1

Kind of an external solution to angular, but maybe using window.onhashchange will work in this scenario for you.

function YouAreGoingPlaces() {
    alert("Welcome to " + location.hash)
}
window.onhashchange = YouAreGoingPlaces() {
   your custom actions here.
}