2

Necesito que al entrar en mi sitio web mi modal se abra automáticamente, uso NgbModal. Os dejo mi código angular y también os dejo lo que probé a hacer. Actualmente solamente se me abre si hago click en un botón pero claro, yo necesito que abra sin necesidad de hacer click.

import { NgbModal, NgbModalRef, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';

// Constructor  
protected modalService: NgbModal,
config: NgbModalConfig

// Abrimos la modal 
openLg(content) {
    this.modalService.open(content, { size: 'lg', centered: true});
}

HTML

<ng-template #content let-modal>
    <div class="modal-header">
      <h5 class="modal-title"><i class="fas fa-exclamation-circle"></i> Tu licencia expirará pronto</h5>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Tu licencia expirará en {{diffInDays}} días, tienes hasta el día {{fecha_renovacion | date:'dd-MM-yyyy'}} para poder renovar tu licencia. También puedes renovar tu licencia en este mismo momento.</p>
    </div>
</ng-template>

Probé a ejecutar la función openLg(content); en el momento que cargo la página pero me dice que content no está declarado, vaya que no me deja pasarle content.

EDITADO

    export class AppComponent implements DoCheck, OnInit, OnDestroy, AfterViewInit {
      @ViewChild('content') contenidoDelModal;
      ngAfterViewInit() {
        this.openLg();
      }
      public content:any;
      public empleado: Empleado;
      public primaryColor: string;
      public secondaryColor: string;
      public pieColor: string;
      public modal : NgbModalRef;
      public ocultar_en_produccion: boolean;
      public today = new Date();
      public diffInDays: number;
      public fecha_actual_renovacion:any;

      constructor(
        protected _mensajesService: MensajesService,
        protected _configService: ConfigService,
        protected _authService: AuthService,
        protected _styleService: StyleService,
      }

      openLg() {
        this.modalService.open(this.contenidoDelModal, { size: 'lg', centered: true })
      }
}
2
  • Creo que en tu component principal, vas a tener que llamar al servicio que abre el modal. Prueba, en tu component principal, llamar a dicha función en el ngInit Commented el 2 dic. 2019 a las 12:09
  • No me deja llamar a la función :/ me dice Cannot find name 'content' Commented el 2 dic. 2019 a las 12:16

2 respuestas 2

1

Para que el modal se habrá nada más iniciar necesitas implementar la interface OnInit. https://angular.io/api/core/OnInit

Todo lo que este dentro de esta función se ejecutará nada más iniciar el componente, después del constructor.

import { OnInit } from '@angular/core';
export class Modal implements OnInit {
  ngOnInit(): void {
    //Todo lo que quieras ejecutar nada mas iniciar
  }
}
6
  • El problema es que no me deja llamar a la función desde el OnInit Commented el 2 dic. 2019 a las 12:17
  • Puede ser porque content no este aún definido? Por eso te puede estar dando fallo. De donde obtienes content? Intenta definir content antes de llamar a la función que abre el modal. Commented el 2 dic. 2019 a las 12:24
  • El fondo se pone como cuando se abre la modal, pero la modal en si no aparece Commented el 2 dic. 2019 a las 12:50
  • Seguramente el modal se abra, pero content no esta creada, por eso sale el modal en blanco. Tienes que tener content creado antes de abrir el modal. Como obtienes content? Commented el 2 dic. 2019 a las 12:54
  • He declarado public content:any ese es el problema como le paso la modal a content entonces... :/ sin hacer click Commented el 2 dic. 2019 a las 13:01
1

una opción que podrías tomar, sería usar la interface AfterViewInit, que nos dará la posibilidad de tener un método que se ejecutará al momento que la vista haya cargado completamente.

Luego, usando el decorador @ViewChild podremos obtener el contenido del modal que se encuentra en tu template y guardarlo en una variable.

@ViewChild('content', {static: false}) contenidoDelModal;

Por último, dentro del método ngAfterViewInit que mencioné antes, lo mostramos.

ngAfterViewInit() {
  this.openLg();
}

Dentro de la función openLg() no deberás recibir más un parámetro, sino que simplemente, deberás mostrar el modal almacenado en la variable contenidoDelModal.

openLg() {
   this.modalService.open(this.contenidoDelModal, { size: 'lg', centered: true });
}

Dejo el código completo funcional por si algún punto de la explicación no quedó del todo claro.

Template

<ng-template #content let-modal>
    <div class="modal-header">
      <h5 class="modal-title"><i class="fas fa-exclamation-circle"></i> Tu licencia expirará pronto</h5>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Tu licencia expirará en 12 días, tienes hasta el día blah para poder renovar tu licencia. También puedes renovar tu licencia en este mismo momento.</p>
    </div>
</ng-template>

TypeScript

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('content', {static: false}) contenidoDelModal;
  ngAfterViewInit() {
    this.openLg();
  }

  constructor(private modalService: NgbModal) {}
  openLg() {
    this.modalService.open(this.contenidoDelModal, { size: 'lg', centered: true });
  }
}
6
  • ME tira el siguiente error "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'className: undefined'. Current value: 'className: modal-backdrop fade show'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?" Commented el 2 dic. 2019 a las 12:33
  • Si podes edita la pregunta y agrega el código completo, por lo general, eso pasa cuando estás intentando usar la variable que obtuviste con ViewChild antes de que se ejecute el método ngAfterViewInit, o también suele producirse cuando usas jQuery Commented el 2 dic. 2019 a las 12:47
  • 1
    Pegale una mirada a este enlace hay varias soluciones para la advertencia que estas recibiendo, una.. por ejemplo, sería usar un setTimeOut Commented el 2 dic. 2019 a las 12:56
  • Edité la respuesta, eso vi que son setTimeOut alomejor se soluciona pero no me funcionó Commented el 2 dic. 2019 a las 13:01
  • Finalmente con setTimeout no me tira el error, pero no me abre la modal :/ hace el amago de abrirla pero no muestra ewl contenido Commented el 2 dic. 2019 a las 15:08

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.