How can I make a modal as a separate component in angular 2?

Question

I am using this library https://github.com/dougludlow/ng2-bs3-modal to make modals in angular 2. I need for my application the modal but in a separate component. Example :

a.component.html is representated by the button :

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>

and the b.component.html is represented by the modal:

<modal #modal>
    <modal-header>
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Cancel</button>
        <button type="button" class="btn btn-primary" (click)="modal.close()">Ok</button>
    </modal-footer>
</modal>

What should I write in the ts? can you please help me with a plunkr? Thanks :)

http://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components — eko, Jan 04 '17 at 05:01

score 3 · Accepted Answer · answered Jan 04 '17 at 07:31

1) a.component:

import {b_component} from './{YOUR_COMPONENT_PATH}';
@Component({
  selector: 'my-app',
  template: `
    <button type="button" class="btn btn-default" (click)="open()">Open me!</button>
    <{YOURS_SELECTOR_OF_B_COMPONENT}></{YOURS_SELECTOR_OF_B_COMPONENT}>
  `,
})
export class App {
  @ViewChild(b_component)
    modalHtml: b_component;

    open() {
        this.modalHtml.open();
    }
  constructor() {
  }
}

b.component:

import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
@Component({
    selector: 'my-modal',
    template: `
    <modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello From new Component!!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
  `
})
export class b_component {
    constructor() {
    }
    @ViewChild('modal')
    modal: ModalComponent;
    open(){
        this.modal.open();
    }

}

it gives me the error: caused by: Cannot read property 'open' of undefined — Adrian Balasa, Jan 04 '17 at 16:20
Have you changed in tag Button click event? In your case it was modal.open(), but now it should be just open(). — Igor JS, Jan 05 '17 at 05:10

How can I make a modal as a separate component in angular 2?

1 Answers1