screenfull-fullscreen-api

name	screenfull-fullscreen-api
description	Implement fullscreen functionality using screenfull library for cross-browser fullscreen support in ng-events project
license	MIT

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

# Already installed in package.json
yarn add screenfull@^6.0.2

Core Patterns

1. Basic Fullscreen Toggle

import { Component, inject, signal } from '@angular/core';
import screenfull from 'screenfull';

@Component({
  selector: 'app-fullscreen-toggle',
  standalone: true,
  : 
})
   {
  isFullscreen = ();
  
  ():  {
     (screenfull.) {
      screenfull.();
      .();
      
      
      screenfull.(,  {
        .();
      });
    }  {
      .();
    }
  }
  
   ():  {
    ..(screenfull.);
  }
}