0

Hola a todos estoy tratando de hacer modales y dropdown en Angular, hice un archivo .js que leo desde mi index.html, pero necesita el window.onload para funcionar, el tema que cuando se recarga la pagina funciona, pero si cierro sesion o cambio de ruta y regreso ya no funciona mas el modal o dropdown, a que se debe?? habra alguna solucion?? o alguna forma de pasar este codigo de mi modal a mi componente?

window.onload = function () {// No Sirve Onload
  var openmodal = document.querySelectorAll(".modal-open");
  for (var i = 0; i < openmodal.length; i++) {
    openmodal[i].addEventListener("click", function (event) {
      event.preventDefault();
      toggleModal();
    });
  }

  const overlay = document.querySelector(".modal-overlay");
  overlay.addEventListener("click", toggleModal);

  var closemodal = document.querySelectorAll(".modal-close");
  for (var i = 0; i < closemodal.length; i++) {
    closemodal[i].addEventListener("click", toggleModal);
  }

  document.onkeydown = function (evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
      isEscape = evt.key === "Escape" || evt.key === "Esc";
    } else {
      isEscape = evt.keyCode === 27;
    }
    if (isEscape && document.body.classList.contains("modal-active")) {
      toggleModal();
    }
  };

  function toggleModal() {
    const body = document.querySelector("body");
    const modal = document.querySelector(".modal");
    modal.classList.toggle("opacity-0");
    modal.classList.toggle("pointer-events-none");
    body.classList.toggle("modal-active");
  }
};
3
  • Así no es en absoluto cómo funciona Angular. window.onload, querySelectorAll, getElementById, estas cosas no tienen absolutamente nada que hacer en una aplicación Angular. Commented el 29 ene. 2021 a las 13:16
  • Esta pregunta puede ayudarte a entender algunos conceptos relacionados al javascript externo es.stackoverflow.com/questions/398001/…
    – Lobos
    Commented el 29 ene. 2021 a las 14:58
  • mucha razon creo es mas complicado meter JS en Angular como tal, es mejor usar directamente los componentes o llamar a una funcion desde ahi, aunque tenia esa duda si se podia de una manera poco compleja Commented el 30 ene. 2021 a las 2:49

2 respuestas 2

0

te sugiero que para probar si algo funciona lo hagas simple, como:

window.onload = function () 
{
    console.log('OK');
};

Dicho esto, cuando trabajas con algún framework JS, no suele ser buena práctica usar el JS estándar y a veces no funciona, ya que implementan sus propios métodos, esto es porque los desarrollos están enfocados a diferentes dispositivos...

Angular tiene el método ngAfterViewInit(): https://angular.io/api/core/AfterViewInit#ngAfterViewInit

Se implementa a nivel de componente:

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit 
{
    ngAfterViewInit() 
    {
        // Tu código ...
    }
}

Según esta respuesta, puedes usar: $window.onload

angular.element($window).bind('load', function() 
{
    // Tu código ...
});
0
0

muchisimas gracias, anduve viendo como implementarlo, y luce bien, me tocara estudiarlo a fondo para implementarlo de forma correcta, pero bueno por lo pronto creo la solucion mas rapida seria usar la funcion directo en los componentes asi:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1" type="button" style="transition: all .15s ease" (click)="toggleModal()">
  Open large modal
</button>
<div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
  <div class="relative w-auto my-6 mx-auto max-w-6xl">
    <!--content-->
    <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
      <!--header-->
      <div class="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
        <h3 class="text-3xl font-semibold">
          Modal Title
        </h3>
        <button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
          <span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
            ×
          </span>
        </button>
      </div>
      <!--body-->
      <div class="relative p-6 flex-auto">
        <p class="my-4 text-gray-600 text-lg leading-relaxed">
          I always felt like I could do anything. That’s the main
          thing people are controlled by! Thoughts- their perception
          of themselves! They're slowed down by their perception of
          themselves. If you're taught you can’t do anything, you
          won’t do anything. I was taught I could do everything.
        </p>
      </div>
      <!--footer-->
      <div class="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b">
        <button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1" type="button" style="transition: all .15s ease" (click)="toggleModal()">
          Close
        </button>
        <button class="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1" type="button" style="transition: all .15s ease" (click)="toggleModal()">
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>
<div *ngIf="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>`
})
export class AppComponent {
  showModal = false;
  toggleModal(){
    this.showModal = !this.showModal;
  }
}

¿Alguien tiene conocimiento de como cerrar el modal al dar click fuera de el? ya que los modales que he construido es lo que no he logrado les agradeceria mucho esa ayudita, y mil gracias por compartir su valioso conocimiento

1
  • Con un hostListener. Commented el 30 ene. 2021 a las 3:17

Tu Respuesta

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

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