Is it would be possible to open a modal located in a « son » component from the parent one?

[dougludlow]

To be clear, I have:

<dashboard>
  <dashboard-products> —> parent component
    <button type="button" class="DashboardProducts-header-menu-addCode (click)="openCreationModal() »> —> should call #productModal
    <modal-product> —> another of my components in which I call your component
        … —> my code
        <modal #productModal></modal>
    </modal-product>
  </dashboard-products>
</dashboard>

If I include directly the modal component inside the parent of course it works, but is it possible to do it that way?

[dougludlow]

@charesbast, if I'm understanding you right, you basically want to open a modal from another modal?

[dougludlow]

I updated the demo to include an example where you open a modal from another modal. Click on the "Nested modals" button.

The code for it is here: https://github.com/dougludlow/ng2-bs3-modal/blob/master/demo/modal-demo.component.html#L65

Let me know if that's what you're looking for.

[charesbast]

@dougludlow Hi Doug, sorry for the misunderstanding. I know it's possible to open a modal from another modal but it's not what I whant.

I would like to open my modal from a parent component (not modal). I have several components:

• the dashboard-products is a classic component in which I have a button. If I click to that button I want to open the modal.
• in this dashboard-products component I have another component (modal-product) that contains some of my code and your modal.

So basically:

• If I put the button inside the modal-product it works because your modal is declared in the same component.
• If I put your modal inside dashboard-products my initial button works (for the same reason)

But If the button and the modal aren't on the same component the link can't be done (or I don't know how to do that)

[dougludlow]

@charesbast oh I see. What you'll do is expose the modal as a property on the modal-product component. You can do that using the ViewChild annotation.

Then you can use ViewChild again to access your modal-products component from your dashboard-products component, or in the view, if you give modal-products a template variable like #modalProduct then you could do something like modalProduct.modal.open() in your click event.

In the demo, you can see the use of the annotation as well as how to open the modal from the component.

Do you follow me?

[charesbast]

Ok I get it, the only thing is that I don't really have the time to test it now, but I'll definitely try it soon, and I'll get back to you for the report

[dougludlow]

Great! I'd code up a better example, but I'm mobile atm.

[dougludlow]

So here's how it would look, roughly, using the template variable approach:

<dashboard>
  <dashboard-products>
    <button type="button" (click)="modalProduct.modal.open()">
    <modal-product #modalProduct>
        <modal></modal>
    </modal-product>
  </dashboard-products>
</dashboard>

modal-product.component.ts

import {Component, ViewChild} from 'angular2/core';
import {MODAL_DIRECTIVES, ModalComponent} from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'modal-product',
    directives: [MODAL_DIRECTIVES]
})
export class ModalProductComponent {
    @ViewChild(ModalComponent)
    modal: ModalComponent;
}

Or going the other route mentioned:

<dashboard>
  <dashboard-products>
    <button type="button" (click)="openCreationModal()">
    <modal-product>
        <modal></modal>
    </modal-product>
  </dashboard-products>
</dashboard>

dashboard-products.component.ts

import {Component, ViewChild} from 'angular2/core';
import {ModalProductComponent} from './'modal-product.component.ts;

@Component({
    selector: 'modal-product',
    directives: [ModalProductComponent]
})
export class ModalProductComponent {
    @ViewChild(ModalProductComponent)
    modalProduct: ModalProductComponent;

    openCreationModal() {
        this.modalProduct.modal.open();
    }
}

[charesbast]

Thanks for the example, I'll try that ASAP to confirm that it works :)

[dougludlow]

@charesbast have you had a chance to test this out?

[charesbast]

Hi Douglas, Sorry I haven't tested it yet but I'll try tomorrow afternoon. I'll get back to you then

Bastien Charès

Le 25 avril 2016 à 22:21:24, Douglas Ludlow (notifications@github.com) a écrit:

@charesbast https://github.com/charesbast have you had a chance to test this out?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/dougludlow/ng2-bs3-modal/issues/39#issuecomment-214508568

[charesbast]

Ok It's working fine, the only difference with your example is that your modal component is just used in my modal-product component. So in my dashboard-products component I only have <modal-product></modal-product>

I prefer to do that way to isolate the modal implementation inside my own component modal-product.

But thank you for the help :)