Where is ToastModule

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.

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

<p>Dear [@et3rnal87](/profile/?id=45135)</p>

<p>MDB doesn't support IE11, so you may have problems with this browser.</p>

<p>About display: none - please try to set it to display: block for IE in styles.</p>

<p>Here you can find Toast (Notification) documentation: <a href="https://mdbootstrap.com/docs/angular/advanced/notifications/" target="_blank">LINK</a>.</p>

<p>About opening modal after clicking on toast - please take a look at the below code:</p>

<pre class="prettyprint"><code><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>
</code></pre>

<pre class="prettyprint"><code>@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();
    });
  }
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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

et3rnal87

Pro User 84Support score
10Questions 3Answers 0Snippets