Topic: Where is ToastModule
et3rnal87 pro asked 5 years ago
Hi,
I can't find anything about the Module? and not sure if I should use it or not? The only page that helped me implemented it is this
https://mdbootstrap.com/legacy/angular/6.1.1/?page=advanced/alerts
Now my problem is that it's not working for me in IE11, I can see in the page source however it has display:none;
Another issue is that the toast doesn't allow me to click on anything next to it (it takes all the width of the page invisibly)
autoDismiss: false isn't working?
Also, I would like to know how can I include a link that opens a modal from the toast.
Damian Gemza staff answered 5 years ago
Dear [@et3rnal87](/profile/?id=45135)
MDB doesn't support IE11, so you may have problems with this browser.
About display: none - please try to set it to display: block for IE in styles.
Here you can find Toast (Notification) documentation: LINK.
About opening modal after clicking on toast - please take a look at the below code:
.html:
<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">
...
</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>
<a class="btn btn-info waves-light" (click)="showInfo()" mdbWavesEffect>Info message</a>
.ts:
@ViewChild('basicModal') modal: ModalDirective;
constructor(private toastrService: ToastService) {}
showInfo() {
const options = { actionButton: 'Action' };
const alertInstance = this.toastrService.success('Hello world!', 'Toastr success!', options);
alertInstance.onAction.subscribe(() => {
console.log('on action');
this.modal.show();
});
}
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: PC
- Browser: IE 11
- OS: windows 10
- Provided sample code: No
- Provided link: Yes