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

ngx-bootstrap modal open from component
ngx-bootstrap-modal stackblitz
bsmodalservice show options
ngx-bootstrap datetimepicker
nullinjectorerror: no provider for bsmodalref!
ngx-bootstrap typeahead example
ng-bootstrap modal
pass data to bootstrap modal angular 6

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' when component1.html loads because childModal is included. How can I get rid of these errors and implement this properly?

component1.html

<button type="button" class="btn btn-outline-primary btn-lg" (click)="modal.showModal()">Test
......
<child-modal #childModal ></child-modal>

component1.ts

 @ViewChild('childModal') childModal: ModalComponent;

modal.html

<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog>
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
          <input type="text" formControl="test1">
          <input type="text" formControl="test2">
          </div>
     </div>
</div>   

modal.component.ts

constructor(private modalService: BsModalService) {
    this.form = new FormGroup({
      'test':                     new FormControl(),
      'test2':                    new FormControl()
      }) 
 }

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: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">Title</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
    </div>
  `
})
export class ChildModalComponent {
  constructor(public bsModalRef: BsModalRef) {}
}

template of the Component which is calling the Modal:

<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>

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

 <child-modal #childModal ></child-modal>

Official doc:

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

ngx-bootstrap How to open a modal from another component , ts' or custom module, we add: import { ModalModule, BsModalRef } from 'ngx-​bootstrap/modal'; @NgModule({ imports:  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 {BsModalRef} from 'ngx

If you use same component then, 

HTML #
    <button (click)="openModalWithComponent()">open</button>

    // for display purpose
    <ng-template #template>
      <div class="modal-body">
      </div>
    </ng-template>

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()"

    }

Using ngx-bootstrap/modal or BsModalRef in a separate component , Let's create another component to use as the modal. ng g c itemAdd. The second component to add a new item, which will use as a modal in the  i want open component1 into component 2 with ngx-bootstrap#modal. below codes are modal function's. categories data not loaded when i clicked on modal button. public openModalComponent() { this.modalRef = this.modalService.show(CategoryTrashComponent); } and trash category codes:

you only need to add your child-component into the entryComponents in your module like this:

entryComponents: [
    childComponent
]

it works for me

How to pass data between NGX Bootstrap modal and parent, app.component.html',. styleUrls: [ '. constructor(private modalService: BsModalService) {}. openModal(template: TemplateRef<any>) {. this.modalRef = this. Ngx-Bootstrap has given a package for an open-source tool that contains all core components powered by Angular. In this article, we will learn about the Modal c

ngx-bootstrap-open-modal, i want open component1 into component 2 with ngx-bootstrap#modal. below codes are modal function's. categories data not loaded when i  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

how can i open component on another component with modal , I am trying to separate my modals and my other components apart. I m using javascript to open modal popup component. not bootstrap way. I am using angular 4 and ngx-bootstrap to open modals. All is working well, and I implement modals via a component. I can also pass data into the modal via the content property of the bsModalRef .

how to call modal from parent component, · Issue #624 · valor , DOCTYPE html> <html> <head> <title>ngx-bootstrap plunkr</title> <!-- Load let list = ['Open a modal with component', 'Pass your data', 'Do something else', '. (​click)="openModalWithComponent()">Open Another Modal</button> <button  We want to open modal on page load/autoshow, I'm calling show modal function in ngOnInit function.code of same is as follows componet.ts file import { Component, OnInit, ViewChild } from '@angular/core'; import { MODAL_DIRECTIVES, BS_VIE

Comments
  • Can you reproduce it in plunker?
  • How can I call the openModalWithComponent() from another components HTML page? Doesnt it have to exist in the same component in order to be able to call it like that?
  • as I showed in my answer, in another component's HTML page you can trigger the execution of a method (in my example the method is openModalWithComponent() triggered by clicking a <button>). Then from the method you can open any Modal Component by using this.modalService.show(ModalContentComponent) assuming that modalService is of type BsModalService, as shown in my code.
  • It doesn't work. I am trying to call this.bsModalRef = this.modalService.show(ModalComponent); from my above code and it just shows an overlay but the actual page doesnt show up. In your above example are both the components in different files? Thats how I have it set it up I dont want a single file since I will have 3 different modals
  • Okay I figured it out. I had to take out the reference to bsmodal in child component. The problem now is that after taking out the first line of modal.html the modal now opens up as small instead of large. BTW Thank you for your help!
  • I'm getting an error No component factory found for <component>. Did you add it to @NgModule.entryComponents?. My code is exactly like how you have it here, what am I doing wrong?
  • "If you use same component then," the title of the question says the opposite of this "how to open from another component".
  • The point is that you haven't answered the question being asked.
  • @AnikeshDhanokar @ViewChild('template') elementView: ElementRef; did the trick
  • thanks @AnikeshDhanokar you save my day