2

Tengo estas funciones, un boton toogle, para fullscreen, y que además añada o elimine unas clases en otros elementos. Por ahora me funciona bien, pero no se si es la mejor forma, para Angular8. ¿Como sería la mejor forma de hacerlo?

Togglefullscreen() {
      var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null)

      var docElm = document.getElementById("fullscreen");
      if (!isInFullScreen) {
          if (docElm.requestFullscreen) {
              docElm.requestFullscreen();
              document.getElementById("fullscreen").addEventListener("click", myres);       
            }
      } else {
          if (document.exitFullscreen) {
              document.exitFullscreen();
              document.getElementById("fullscreen").addEventListener("click", mydes);

               }
      }
      function myres() {
        document.getElementById("cameraPublisherContainer").classList.add("full");

      }
      function mydes() {
        document.getElementById("cameraPublisherContainer").classList.remove("full");


      }
    }
2
  • Hola que tal. Para mayor compatibilidad puedes revisar esta respuesta; stackoverflow.com/a/51998735/4326551
    – Legna
    el 24 feb. 2020 a las 14:28
  • Te recomendaria usar el servicio Renderer2 que viene con el propio angular para hacer manipulaciones del DOM. Manipular los elementos directamente puede resultar en que rompas la funcionalidad de la pagina ya que Angular dejara de estar informado del estado real del DOM en todo momento.
    – Narshe
    el 24 feb. 2020 a las 19:43

1 respuesta 1

0

Es mejor utilizar la directiva NgClass y crear un booleano por ejemplo que se llame isFullScreen, dentro del elemento con id cameraPublisherContainer colocar:

<some-element id="cameraPublisherContainer" [ngClass]="{'full': isFullScreen}">...</some-element>

Y en el elemento con id fullscreen colocar:

<some-element id="fullscreen" (click)="toogleFullScreen(!isFullScreen)">...</some-element>

Dentro del controlador agregar:

    toogleFullScreen(isFullScreen) {
       this.isFullScreen = isFullScreen;
        let docElm = document.getElementById("fullscreen");
        if (isFullScreen){
                  docElm.requestFullscreen();
        } else {
                  document.exitFullscreen();
        }
   }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.