That\'s the way I use the ng2-bootstrap modal:
import {Component} from \'@angular/core\';
import {NgbModal} from \'@ng-bootstrap/ng-bootstrap\';
@Component({
I would suggest you look at the Child Modal example here ng2-bootstrap documentation for modals. Just add public variables to the parent component and use them in your modal using standard binding techniques.
So in the example add this to the template like so:
<div class="modal-body">
{{parentMessage}}
</div>
and change the component like this:
export class DemoModalChildComponent {
@ViewChild('childModal') public childModal:ModalDirective;
parentMessage = 'I am a child modal, opened from parent component!'; //Add this
Now you that you are passing in data from the parent component you can pass data to the parent component by following the standard patterns.
To pass parameters/data to the modal, my guess would be to use the componentInstance
:
open(content) {
const modal: NgbModalRef = this.modalService.open(content, { size: 'lg' });
(<MyComponent>model.componentInstance).data = 'hi';
modal.result.then((result) => {
console.log(result);
}, (reason) => {
console.log(reason);
});
}
This assumes that the componentInstance is of type MyComponent
and that it has a public property data
Here's how you can pass data to your HTML Template in Angular2
import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'add-customer-modal',
template: `
<template #test let-c="close" let-d="dismiss">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
{{MESSAGE_DATA}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</template>
<button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>`})
export class AddCustomerModal {
MESSAGE_DATA : any;
constructor(private modalService: NgbModal) {}
open(content) {
this.MESSAGE_DATA = "PASS DATA TO ANGULAR2 MODAL"
this.modalService.open(content, { size: 'lg' }).result.then((result) => {
console.log(result);
}, (reason) => {
console.log(reason);
});
}
}
check how MESSAGE_DATA is used inside HTML Template.
Anyone still stumbling onto this might find this handy, all you need to do is declare a field inside your ModalComponent like this:
modalHeader: string;
advertiser: Advertiser;
You can set these fields by doing the following when you are opening a modal.
advertiserModalShow() {
const activeModal = this.modalService.open(AdvertiserModal, { size: 'lg' });
activeModal.componentInstance.modalHeader = 'Advertiser';
activeModal.componentInstance.advertiser = this.selectedAdvertiser;
}
In your template you can access them like this:
value={{advertiser.code}}
Hope this helps.
In Angular 8 for ng-bootstrap try this
Complete tutorial here
openModal() {
const modalRef = this.modalService.open(MyBootstrapModalComponent,
{
scrollable: true,
windowClass: 'myCustomModalClass',
// keyboard: false,
// backdrop: 'static'
});
let data = {
prop1: 'Some Data',
prop2: 'From Parent Component',
prop3: 'This Can be anything'
}
modalRef.componentInstance.fromParent = data;
modalRef.result.then((result) => {
console.log(result);
}, (reason) => {
});
}
There is a better approach to handle data in the modal if you need to have data immediately after modal construction. Using angular injector technic.
class CustomModalOptions {
stringProp: string;
numberProp: number;
}
this.modal.open(MyModal, {
injector: Injector.create([{
provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
}], this.injector)
});
@Component({ ... })
class MyModal {
constructor(private options: CustomModalOptions) {
console.log(this.options.stringProp);
console.log(this.options.numberProp);
}
}