svierk / angular-bootstrap-toast-service Goto Github PK

Hello Sebastiano,

Thank you for putting this project together, it has helped me a lot.

I do have one issue however. When I add the Toast component, all my existing dropdown (Bootstrap 5) elements stop opening. I have been able to isolate it to the Toast component (not Toaster).

I forked your code and added a drop down and it works just fine, so it is something with my code.

Any ideas why this may be happening?

Thanks!
Shai

HI Sebastian,

You might remember you helped me last week. I've been able to overcome that issue with your guidance, thank you.

I am now trying to implement buttons/actions on the toast.

In the component, I call the service
customer.component.ts
this.toastService.actionToast("Test", "Test");

Then in the service, I've adapted your code to take Action EventType and showButtons parameter:

toast.service.ts

  actionToast(title: string, message: string) {
    this._toastEvents.next({
      title: title,
      message: message,
      type: EventTypes.Action,
      icon: "../../../../assets/img/action-toast.png",
      errorCode: "",
      showButtons: true
    });
  }

I have also added the two buttons to the toast, with *ngIf

toast.component.html

<div
  #toastElement
  class="toast fade mt-5"
  [ngClass]="type"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  style="width: 500px;"
>
  <div class="toast-header">
    <img src={{icon}} class="rounded me-2" alt="toast icon" >
    <strong class="me-auto">{{title}}</strong>
    <button type="button" class="btn-close" aria-label="Close" (click)="hide()"></button>
  </div>
  <div class="toast-body" style="padding-bottom: 40px;">{{message}}</div>
  <div> {{errorCode}}</div>
  <div>
    <button type="button" *ngIf="showButtons" (click)="yes()">Yes</button>
    <button type="button" *ngIf="showButtons" (click)="no()">No</button>
  </div>
</div>

I would like to emit the Yes and No events back to the original calling component via the ToastService. I have added

toast.component.ts

@Output() onYes: EventEmitter<any> = new EventEmitter();
.
.
.
  yes() {
    this.onYes.emit();
    this.hide();
  }
.
.
.

But I am not sure how to "listen" to the emitter from the ToastService. Any suggestions?

Thanks!
Shai