How to open an ng-Bootstrap-Modal that is a child component?

open modal from another component angular 6
pass data to bootstrap modal angular 6
ng-bootstrap open modal from component
open ngbmodal from another component
angular open modal from component
bsmodalservice pass data
ngbmodal dynamic content
ng-bootstrap table

I'm new with Angular and I have some doubts about Modals with ng-Bootstrap. I've been able to open Modals that are in the same component and they work fine, an example is this one:

Link:

<a (click)="openAbout(contentAbout)" class="nav-link">About</a>

Click event:

  openAbout(contentAbout) {
    this.modalService.open(contentAbout, { centered: true, scrollable: true });
  }

Modal:

<ng-template #contentAbout let-c="close" let-d="dismiss">
  <div class="modal-header">
      <h4 class="modal-title" id="modal-primary-title">About us</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
  </div>
  <div class="modal-body centered">
    <h2>Gravity Now!</h2>
    <p>It is a platform designed for Space Apps Challenge and the Challenge Gravity Map, Earth Watch category and was chosen in the Top 5 of The Most Inspiring Projects of 2014.</p>
    <a href="https://2014.spaceappschallenge.org/awards/#globalawards" target="_blank">
      <img id="spaceLogo" src="./assets/space_apps.png">
    </a>
    <br>
    <img id="supernovaLogo" src="./assets/supernova-logo.png">
    <p>Also, you can download our apps.</p>
    <div class="row">
      <div class="col">
        <a href="https://play.google.com/store/apps/details?id=tk.supernova.gnow" target="_blank">
          <img class="logo" src="./assets/android.png">
        </a>
      </div>
      <div class="col">
        <a href="https://www.microsoft.com/en-us/p/gravity-now/9nblgggzjlp5" target="_blank">
          <img class="logoWindows" src="./assets/windows.png">
        </a>
      </div>
    </div>
  </div>
</ng-template>

And it works, however, I'd like to move this modal to a child component because I have 4 Modals and the code looks somehow disorganized, but if I create a new child component, move the modal code to the child and then, I add it to the parent component like this:

<app-about></app-about>

Nothing happens, since the click doesn't open anything. Does anyone have experience something similar? Do you know what should I change in the click event?

I read even the documentation and I cannot find an example related to my one:

https://ng-bootstrap.github.io/#/components/modal/examples

Thanks for any idea.

There are a couple of changes to take in consideration.

The first step is to register your Modals in the entryComponents section of your app.module.ts:

entryComponents: [
    AboutComponent,
],

Next, copy your old Modal to your new component and remove these 2 lines:

<ng-template #contentAbout let-c="close" let-d="dismiss">
</ng-template>

After, there is a small change in the logic of the click event on how to call it:

This is the new HTML code:

<a class="nav-link" (click)="openAbout()">About</a>

This is the new TypeScript event:

openAbout() {
    //Here you define the name of your component
    this.modalService.open(AboutComponent);
    //This section is if you want to have any variable to initialize
    //compConst.componentInstance.weight = undefined;
}

Also, in your new Component, you need to add change your constructor and add an instance of NgbActiveModal.

constructor(public activeModal: NgbActiveModal) { }

Another important change is in the logic of closing the modal, it needs to be changed to this:

<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

You need to change the old: (click)="d('Cross click')" to (click)="activeModal.dismiss('Cross click')"

And with all these changes it will work like charm. I got some inspiration from here:

https://stackblitz.com/edit/angular-uwtgs6

Open model of child component from parent component · Issue , To demonstrate the data flow to and from Bootstrap modals, I will create the ng generate component modal-containerng generate component modal-content modalService.open(ModalContentComponent);modalRef. To open bootstrap modal with the component we call the open method of NgbModal class. It also takes some configuration properties: backdrop : If `true`, the backdrop element will be created for a given modal.

I haven't tried this but what you can do is that you can emit an event from child to parent. Try looking out for event emitter in the Angular docs.

How to pass data to and receive from NG Bootstrap modals, Angular tutorial on How to pass data from parent component to To open bootstrap modal with the component we call the open Angular 7/8 Pass Data and Handle Events between Parent-Child Components using… “ng-bootstrap” Modal Popup (using ng-template and ngbModal service) In order to implement these components, we will have to configure NgbModule in our app module, i.e., app.module.ts file as we have seen in our last article and then we will able to use all ng-bootstrap components in our Angular app.

Instead of calling child component in parent view you sould try this.
// if want to pass any value to child (parameter @Input() value in child);
// get back response from child (result @Output() EventEmitter value in child)
openChildComponentModel() {
        const modalRef = this.modalService.open(
            AboutComponent,
            {backdrop: 'static'}
        );
        modalRef.componentInstance.parameter= 'Text';
        modalRef.componentInstance.result.subscribe((response) => {}
        });
    }

@ng-bootstrap, Open angular Powered bootstrap modal from another component - angular. its open normal text popup without ng-template Child Html: <ng-template #content  Want to get access to a child component, directive or a DOM element from a parent component class? It’s easy to do with the ViewChild decorator. ViewChild returns the first element that matches a given component, directive or template reference selector. In cases where you’d want to access multiple children, you’d use ViewChildren instead.

Open angular Powered bootstrap modal from another component , to your project. With the emergence of ngx- and ng-bootstrap, we can… So, the modal-component is all set up, but how do we initialize it? We will do this through the <div class="modal-boy"> <div class="container"> The hard part was to wire the Bootstrap modal component to dynamically handle data. That's where NG Bootstrap library comes in handy. NG Bootstrap lets you use Bootstrap functionalities without

Creating Forms Inside Modals with ng-bootstrap, <title>ng-bootstrap demo</title> <link rel="stylesheet" import { Component, NgModule } from '@angular/core'; import { BrowserModule } from event listener on the child to disapper // Function only runs on child modal open as is // comment  Ngx-Bootstrap has given a package for an open-source tool which a native Angular directive for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article, we will learn about the Modal component, which is a cool feature of Ngx-bootstrap.

Example usage of the modal widget from https://ng-bootstrap.github , Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, Before getting started with Bootstrap's modal component, be sure to read the data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <div  Here we have the modal component with some elements inside it. The modal component will be invisible when the ShowModal component renders, on clicking the Open Dialog button the modal component is displayed, showing high above other components. If we click on the Close Dialog button the modal component is removed from the screen. Looking into

Comments
  • How if the child is invisible? It's a modal, it will be visible until it opens. And Output would emit something if you perform an action from the child itself that I'm not editing or changing anything from it. Also, this is more like a comment than an answer.
  • Please check this link once. stackoverflow.com/questions/42460418/…
  • I'll check it, but that's a different library and the behavior might be different.
  • You can try to understand the logic though. Whatever works. Cheers.
  • I added my solution since it was relatively different from the link.
  • Hi Mohsin, should I write a modalService? Or is it a general class? Thanks.
  • This general class which contain ref of 'NgbModal'. import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  • Thanks! I'll let you know in a couple of hours when I'm back at home.