Angular Visibility API
This is an Angular service for interacting with Browser's Visibility API. This API is useful when you want to know whether your application is currently being viewed by the user or if the tab/window is in the background.
Usage
To use this service, the VisibilityModule
must be imported into your app or dependent module.
@NgModule({
...
imports: [
...,
VisibilityModule,
...
]
})
export class MyModule {}
VisibilityService
The visibility service works in all major browsers. If the browser does not have support for the visibility API, the service will fallback to a legacy method for determining browser visibility.
The service has a single public method onVisibilityChange
which returns an Observable<Boolean>
. When the caller
subscribes to the visibility changes of the Observable
, the subscribe handler will be called immediately with the current
value of the browser's visibility. All future changes to the visibility will be published to all subscribing methods.
For more information see the example below.
@Component({
...
})
export class MyComponent {
constructor(private visibility: VisibilityService) {}
...
this.visibility.onVisibliltyChange().subscribe((isVisible) => {
if (isVisible) {
//perform actions that need to be done when browser if visible
} else {
//perform actions when browser has been hidden
}
})
}
Decorators
There is also the option to use provided method decorators to decorate methods that should only be run based on a certain browser visibility or when the visibility of the browser changes
@OnVisibilityChange()
Any method decorated with this annotation will be called each time the browser visibility changes. This is very similar
to subscribing to events from the VisibilityService
, just providing another convenience method for interacting with
the service. Methods decorated with this annotation should accept one parameter isVisible
that will be provided to the
decorated method when the visibility change fires.
export class MyComponent {
...
@OnVisibilityChange()
visibilityChanged(isVisible: Boolean) {
if (isVisible) {
//perform actions that need to be done when browser if visible
} else {
//perform actions when browser has been hidden
}
}
}
@WhenVisibilityIs(isVisible: Boolean)
Another method for interacting with the VisibilityService
is to decorate a method with this decorator. The @WhenVisibilityIs
decorator takes a boolean value that indicates, based on the provided browser visibility status, whether the decorated
method should be invoked or not.
export class MyComponent {
...
@WhenVisibilityIs(true)
executeOnlyWhenVisible(someArg: string, anotherArg: number) {
//this method only gets invoked (when called) if the application window is determined to be visible to the user.
}
@WhenVisibilityIs(false)
executeOnlyWhenHidden() {
//this method only gets invoked (when called) if the application window is determined to be hidden to the user.
}
}