Description

Utilize Element Fullscreen API so that we can make any element enter full-screen mode. This will be useful for dashboard-like pages where certain sections/cards/charts should be maximised.

API proposal

A standalone directive that can be attached to a trigger element and set the target element that should enter full-screen, similar to how mat-menu is used.

Directive would attach a click handler to the host element that will toggle between fullscreen and non-fullscreen.

Directive selector should have a matching @Input('infFullscreenTriggerFor') that will be used for passing the target element.

Directive should also include exportAs: "infFullscreen" that can be used for reading the current fullscreen state.

<button [infFullscreenTriggerFor]="targetElement" #fullscreenState="infFullscreen">
  {{  fullscreenState.isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
</button>

<section #targetElement>
  ...
</section>

a11y

Exiting the fullscreen should be possible via keyboard (Esc)