Skip to content

🔲 An Angular 2+ service to quickly use the HTML5 fullscreen API.

License

Notifications You must be signed in to change notification settings

alxhotel/angular-bigscreen

Repository files navigation

angular-bigscreen

NPM Build Status Dependency Status Angular style guide

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
  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.