Displays a container in full screen mode. Requires Angular version >= 18.0.0.
-
npm i @duxor/ngx-fullscreen-directive -
Import
FullScreenDirectivein a@NgModule -
Add the directive to the container which needs to be maximized
<!-- container to be displayed in the full screen mode -->
<element fullScreen #fullScreen="fullScreen"> ... </element>
...
<!-- element which triggers the full screen mode -->
<element (click)="fullScreen.openFullScreen()"></element>
<!-- OPTIONAL: element which will trigger exiting from the full screen mode -->
<element (click)="fullScreen.closeFullScreen()"></element>You can define custom styles to the container while it is displayed in full screen mode by sending an object of type CSSStyleDeclaration to the fullScreenCtrStyle input property of the directive. These styles will be rolled-back after the full screen mode is exited:
customStyles = {
/*your styles*/
} as CSSStyleDeclaration;<!-- container to be displayed in the full screen mode -->
<element fullScreen [fullScreenCtrStyle]="customStyles"> ... </element>You can handle fullScreenEnabled event which notifies whether the full screen mode is toggled on.
<!-- container to be displayed in the full screen mode -->
<element fullScreen (fullScreenEnabled)="onFullScreenToggle($event)">
...
</element> onFullScreenToggle(enabled: boolean) {
}By handling fullScreenInit event, you get access to the openFullScreen() and closeFullScreen() directive functions into your component's .ts file
<!-- container to be displayed in the full screen mode -->
<element fullScreen (fullScreenInit)="onFullScreenInit($event)"> ... </element>onFullScreenInit(instance: FullScreenInstance) {
this._fullScreenInstance = instance
}
...
//toggle on full screen
this._fullScreenInstance.openFullScreen();
//toggle off full screen
this._fullScreenInstance.closeFullScreen();