0
217
Viewsngb modal pass the data to when form edit angular
I am using ngb modal for my form edit. this is my edit button function
editCheckin(data: CheckInModel, details: any) {
console.log(data);
this.modalService.open(details, { ariaLabelledBy: 'modal-basic-title', size: 'xl', backdrop: 'static' }).result.then((id) => {
}, (reason) => {
});
} When I click the edit button, above function call and loading popup correctly. This is my edit button
<button mat-stroked-button type="button" class="action-btn"
(click)="editCheckin(element, details)">
<i class="fas fa-pencil-alt"></i>
</button>
edit object passed correctly. console.log(data) result is like below
now i need to that console logged data to my pop up. how i pass it.
·
Juan Pablo Isaza
1 answers
Answer question0
You can edit the component instance directly doing something like
in your modal you add a property :
data: CheckInModel
and when you call the modal you just do :
openModal() {
const modalRef = this.modalService.open(ModalContentComponent);
modalRef.componentInstance.data = this.data;
}
In my app, I have a custom service that wrap the ngb modal service :
export class ModalService {
constructor(private modalService: NgbModal) {}
open<C, T>(content: unknown, config?: T, options?: NgbModalOptions): ModalRef<C> {
const modal = this.modalService.open(content, {
centered: true,
backdrop: true,
size: 'm',
...options,
});
Object.assign(modal.componentInstance, config);
return modal;
}
}
This way I can simply call my modal with my service and pass the data :
const ref = this.modalService.open<GenericModalComponent, GenericModalData>(
GenericModalComponent,
{
data: 'this will be passed to the modal instance'
}
);
The important thing is that the modal have a defined property with the same name (here would be data)
more Here
·
Juan Pablo Isaza
Report
Answer question