In this example, we're going to create a new project using @angular/cli
and add both the core and keepalive functionality to the root of our app to keep track of user idleness.
Keepalive is useful to repeatedly perform a background action while a user is active, however it requires the @angular/common/http module.
You do not need to use keepalive if this is not useful for your application.
Create a new project using ng new.
Use ng add to install the dependency to your application.
Adding provideNgIdleKeepalive() in ApplicationConfig a global instance of
Idle and Keepalive will be injected into each component, and state should be preserved across your components
In this example, we want to keep track of the user's idle state across the application. Therefore, we're going to configure
it on our root app component so that it shows up and functions the same way on every page without having to add this code
to every component. You can always add this functionality to individual components as needed
by adding provideNgIdleKeepalive() or provideNgIdle() in providers array of the component.
However, as we have added in ApplicationConfig, by default a global instance of
Idle and Keepalive will be injected into each component, and state should be preserved across your components
NgIdleKeepaliveModule provide a default instance of Idle and Keepalive to your
module.
In this example, we want to keep track of the user's idle state across the application. Therefore, we're going to configure
it on our root app component so that it shows up and functions the same way on every page without having to add this code
to every component. You can always add this functionality to individual components as needed, by default a global instance of
Idle and Keepalive will be injected into each component, and state should be preserved across your components
Now that your component has state to indicate what's going on, you can decide how your UI should present it. We're very simply going to output our state variables on the screen.