screenfull-fullscreen-apilisted
Install: claude install-skill aiskillstore/marketplace
# Screenfull Fullscreen API Skill
This skill guides the implementation of fullscreen functionality using the screenfull library in the ng-events construction site management system.
## When to Use This Skill
**Triggers**: "fullscreen", "screenfull", "full screen mode", "toggle fullscreen", "exit fullscreen"
Use this skill when:
- Adding fullscreen toggle buttons
- Creating fullscreen viewers (images, videos, dashboards)
- Implementing presentation modes
- Building immersive UI experiences
- Providing fullscreen for specific components
## Installation & Setup
```bash
# Already installed in package.json
yarn add screenfull@^6.0.2
```
## Core Patterns
### 1. Basic Fullscreen Toggle
```typescript
import { Component, inject, signal } from '@angular/core';
import screenfull from 'screenfull';
@Component({
selector: 'app-fullscreen-toggle',
standalone: true,
template: `
<button (click)="toggleFullscreen()" class="fullscreen-btn">
@if (isFullscreen()) {
<i nz-icon nzType="fullscreen-exit" nzTheme="outline"></i>
Exit Fullscreen
} @else {
<i nz-icon nzType="fullscreen" nzTheme="outline"></i>
Enter Fullscreen
}
</button>
`
})
export class FullscreenToggleComponent {
isFullscreen = signal(false);
toggleFullscreen(): void {
if (screenfull.isEnabled) {
screenfull.toggle();
this.updateFullscreenState();
// Listen for fullscreen changes
screenfull.on('change', () => {