ngx-bootstrap How to open a modal from another component?

Question

What I\'m trying to do is open a modal from another component, however I keep getting this error TypeError: Cannot create property \'validator\' on string \'test1\'

Answer 1

If you're trying to open a Modal Component from another Component, then this is the right way to do it with 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) {}
}

template of the Component which is calling the Modal:

Create modal with component

So you should NOT include the Modal Component in the template like this:

Official doc:

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