Navigation between pages with HTML DOM Animations on background

I’m trying to implement a Timer Animation like this with DOM element on a sidemenu template. This implementation is done on Page1 / the root page. when i navigate to page 2 on sidemenu, the navigation stack stops the timer and resumes it back when i return back, and also the DOM element results in a “TypeError: Cannot read property ‘innerText’ of null”. I completely understand on why it results in error. But how do we run this timer in background when the page2 is getting executed, if i could atleast able to run this timer in background then i think i can use ionicviewWillEnter function from View Controller to catch the entry event and change the DOM Element accordingly.

may be try with a separate component and create a timer object pass if across the pages

Hi, thanks for the response. kindly correct me if I’m wrong. If i have multiple pages on the sidemenu then would it be a good solution to pass this information across pages?

create a timer service,
create a component which consume that timer service,
obviously it provide the current time without any problem
so you don’t need to pass on any object over pages

May be this Plunker example will help you

Thanks for your response… I was also reading about providers and injectors and trying to implement similar fashion.