How do you open the modal from an Angular2 EventEmitter callback?

[d1820]

Having trouble determining how i would open a modal not from a click event? I see the example to close one, but i am not sure where the @ViewChild lives. Can you shed some insight on this please

My angular component click event calls a method to pass in an Id, i need too look up the details of the id on the server then show the modal...

Thanks

[dougludlow]

@d1820 I've updated the docs to be a little more clear on how to show/hide a modal from a component. I've also added an example to the demo. Here's the gist of it:

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

@Component({
    selector: 'parent-component',
    directives: [MODAL_DIRECTIVES],
    template: `
        <modal #myModal>
            ...
        </modal>
    `
})
export class ParentComponent {
    @ViewChild('myModal')
    modal: ModalComponent

    close() {
        this.modal.close();
    }

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

Does that help at all?

[d1820]

That work great thanks!!

Lastly if i had two different modals available from a component would that just be

@ViewChild('myModal')
modal: ModalComponent

@ViewChild('myModal2')
modal2: ModalComponent

Thanks

[dougludlow]

I guess to specifically address your question though, something like this should work:

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

@Component({
    selector: 'parent-component',
    directives: [MODAL_DIRECTIVES],
    template: `
        <button (click)="open()">Open me!</button>
        <modal #myModal>
            ...
        </modal>
    `
})
export class ParentComponent {

    @ViewChild('myModal')
    modal: ModalComponent;
    people: any;

    constructor(private http: Http) { }

    open() {
        this.http.get('people.json')
            .map(res => res.json())
            .subscribe(people => { 
                this.people = people;
                this.modal.open();
            });
    }
}

[dougludlow]

@d1820 yes, assuming you have set a template variable for each modal like so:

<modal #myModal>
    ...
</modal>

<modal #myModal2>
    ...
</modal>

[d1820]

Perfect thanks for all your help..