ngx-bootstrap ¿Cómo abrir un modal desde otro componente?

No busques más por todo internet ya que has llegado al espacio perfecto, poseemos la solución que quieres encontrar y sin complicaciones.

Solución:

Si está intentando abrir un componente modal desde otro componente, esta es la forma correcta de hacerlo con ngx-bootstrap:

import  Component  from '@angular/core';
import  BsModalService  from 'ngx-bootstrap/modal';
import  BsModalRef  from 'ngx-bootstrap/modal/modal-options.class';

/* This is the Component from which we open the Modal Component */
@Component(
  selector: 'my-component',
  templateUrl: './service-component.html'
)
export class MyComponent 
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) 

  public openModalWithComponent() 
    /* this is how we open a Modal Component from another component */
    this.bsModalRef = this.modalService.show(ModalContentComponent);
  


/* This is the Modal Component */
@Component(
  selector: 'child-modal',
  template: `
    

      
Title
      
        ×
      
    
    

      ...
    
    

      Close
    
  `
)
export class ChildModalComponent 
  constructor(public bsModalRef: BsModalRef) 

plantilla del Componente que está llamando al Modal:

Create modal with component

Entonces deberías NO incluya el componente modal en la plantilla de esta manera:

Documento oficial:

https://valor-software.com/ngx-bootstrap/#/modals#service-component

If you use same component then, 

HTML #
    open

    // for display purpose
    
      

      
    

COMPONENT #
import  BsModalRef  from 'ngx-bootstrap/modal/bs-modal-ref.service';
import  BsModalService  from 'ngx-bootstrap/modal';
import  ViewChild, ElementRef  from '@angular/core';

      bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) 
      @ViewChild('template') elementView: ElementRef;
    openModalWithComponent()     
        this.bsModalRef = this.modalService.show(this.elementView);
        // this.bsModalRef.content.closeBtnName = 'Close';
        // (click)="bsModalRef.hide()"

    

Te mostramos las reseñas y valoraciones de los lectores

Si crees que te ha sido útil este artículo, sería de mucha ayuda si lo compartes con más entusiastas de la programación y nos ayudes a extender nuestra información.

---

---

Utiliza Nuestro Buscador