Topic: How to get the content from this.modalRef
myictsolutions premium asked 5 years ago
Expected behavior get value content from modalRef Actual behavior undefined value Resources (screenshots, code snippets etc.) when i do: console.log(this.modalRef) is show me the property content which contains data. when i do console.log(this.modalRef.content) is shows up as undefined.
help will be appreciated :)
Bartosz Termena staff answered 5 years ago
Dear @myictsolutions
You want to get content of the element (for ex. the text content)?
If so, you have to use reference like #modalContentBody
in the template, and @ViewChild
decorator.
Here is my example to do this:
<button
type="button"
mdbBtn
color="primary"
class="relative waves-light"
(click)="basicModal.show()"
mdbWavesEffect
>
Launch demo modal
</button>
<div
mdbModal
#basicModal="mdbModal"
class="modal fade"
tabindex="-1"
role="dialog"
aria-labelledby="myBasicModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close pull-right"
aria-label="Close"
(click)="basicModal.hide()"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" #modalContent >
...
</div>
<div class="modal-footer">
<button
type="button"
mdbBtn
color="secondary"
class="waves-light"
aria-label="Close"
(click)="basicModal.hide()"
mdbWavesEffect
>
Close
</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>
Save changes
</button>
</div>
</div>
</div>
</div>
TS:
@ViewChild('modalContentBody', { static: true }) modalContentBody: ElementRef;
ngOnInit(): void {
console.log(this.modalContentBody.nativeElement.textContent);
}
Hope it helps!
Best Regards, Bartosz.
myictsolutions premium answered 5 years ago
Hi Bartosz,
this is not working for me i have 2 components. 1 where I call the component from and send data (content) to the form on the property this.modalRef. so what you can do in the frontend is just use {{content.property}} however in order to get validation working I need this content property in the ts script. so i can do set.option to content.propertyname. when i do console.log(this.modalref) on the seconde property where the data is been sent to I do get all the information. included content but when i do this.modalref.content it comes back as undefined.
kind regards,
Max
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.2.0
- Device: Mac Book pro
- Browser: chrome v67
- OS: Mojave
- Provided sample code: No
- Provided link: No