How pass data from ModalService into component
Solution 1
Here, in parentComponent where initialState data is being sent using config param in modalService.show:
const initialState = {
data: "Test Data"
};
this.modalService.show(ModalContentComponent, {initialState});
Access the data in ModalContentComponent by simply defining exact same named variable, i.e., data: string;
You will be able to access value of data in ModalContentComponent.html and ModalContentComponent.ts.
Solution 2
You can also use the BsModalRef content
Like
my-modal.component.ts
export class MyModalComponent {
public myContent;
constructor(){}
}
calling your modal from some other component
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
...
public modalRef: BsModalRef;
constructor(public modalService: BsModalService){}
public openModal() {
this.modalRef = this.modalService.show(MyModalComponent);
this.modalRef.content.myContent= 'My Modal Content';
}
...
Solution 3
At the stage of creating a modal, every property from initialState
is copied to the component that you pass as a modal content.
For example, if your initialState
looks like this:
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...',
'PROFIT!!!'
],
title: 'Modal with component',
closeBtnName: 'Close'
};
Then all these properties are copied to your modal content component and they're accessible there and you can use them in your template or ngOnInit
as usual. In general, these properties are like @Input
.
Example - https://stackblitz.com/edit/angular-9n2zck?file=app/service-component.ts
Solution 4
Since I can't yet comment on IlyaSurmay's answer...his solution works in 2.0.2 (but not in 2.0.0).
MgSam
I am a full time software developer that works primarily with C#/.NET, TypeScript/JavaScript, HTML/CSS, XAML, and T-SQL.
Updated on July 09, 2022Comments
-
MgSam almost 2 years
I'm trying to use ngx-bootstrap-modal to pass data from a modal service into a modal component. The examples show this:
this.modalService.show(ModalContentComponent, {initialState});
But it doesn't show how the
ModalContentComponent
actually consumes that state. I've played around in a debugger and I never see my component getting that data.How do I access it from the component?
-
Velkumar about 6 yearshow to pass the id? i'm getting undefined this.modalRef = this.modalService.show(ConfirmationModalComponent, { initialState }); this.modalRef.content.itemId = '2'; ngOnInit(): void { console.log(this.itemId); }
-
IlyaSurmay about 6 yearsProperties of a modal component that were set after
modalService.show()
won't be available inngOnInit
. If you want to get access to this data inngOnInit
, useinitialState
as I shown above -
Maayan Hope over 5 yearsi had version 1.9.3 and did not work. after upgrading ngx-bootstrap to version 2.0.5 it started working
-
NewestStackOverflowUser over 5 yearsJust to add something that I struggled with. After showing the modal using the service
modalService.show(MyModalComponent, initialState)
then the initialState can be injected in MyModalComponent's constructor like thisconstructor(modal: BsModalRef, options: ModalOptions)
-
Krunal Shah almost 4 yearswhat is this.modalConfig ? or how to set value of this.modalConfig ?