angular-bigscreen

angular-bigscreen

AngularBigScreen is an Angular service to quickly use the HTML5 fullscreen API.

Install

1. Install angular-bigscreen node module through npm:

   $ npm install angular-bigscreen --save
   

2. Import BigScreenModule to your AppModule

   import { BigScreenModule } from 'angular-bigscreen';
   
   @NgModule({
     imports: [
       BigScreenModule
     ]
   })
   export class AppModule {	
   }
   

3. Import BigScreenService and use it in a component

   import { BigScreenService } from 'angular-bigscreen';
   
   @Component({
     selector: 'app-root',
   })
   export class AppComponent {
     constructor(private bigScreenService: BigScreenService) {
     }
   }
   

Usage

For example:

// Request fullscreen
this.bigScreenService.request(this.elementRef.nativeElement);

API

this.bigScreenService.isFullscreen()

Returns a boolean. True if fullscreen is being used, else false.

this.bigScreenService.isEnabled()

Returns a boolean. Checks if fullscreen is enabled.

this.bigScreenService.request(el: ElementRef)

Requests fullscreen on an ElementRef.

this.bigScreenService.exit()

Exits from fullscreen.

this.bigScreenService.onChange(callback: any)

This is a wrapper for document.fullscreenchange.

this.bigScreenService.onError(callback: any)

This is a wrapper for document.fullscreenerror.

this.bigScreenService.getElement()

Returns an element. This is a wrapper for document.fullscreenElement.

License

MIT. Copyright (c) Alex.