How to handle the event when click on Angular2-toaster pop-up

Question

Currently, I'm working on a project that uses angular2-toaster.

// Show message notification
  this.toasterService.pop('success',
    `New message from ${data.sender.name} (${data.sender.hid})`,
    data.message);

When the user clicks to the pop-up, I want to show the dialog for more detail. I've searched the document on https://www.npmjs.com/package/angular2-toaster but can not find the solution to handle the event when user click on the pop-up, can you suggest for me some advice?

Thanks a lot.

slaesh · Accepted Answer · 2016-12-06T11:18:32.710

3

You could use the clickHandler.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toaster-container [toasterconfig]="config1"></toaster-container>
      <button (click)="popToast()">pop toast</button><br/>
    </div>
  `,
})
export class App {
  private toasterService: ToasterService;

  constructor(toasterService: ToasterService) {
    this.toasterService = toasterService;
  }

  popToast() {
    var toast: Toast = {
      type: 'info',
      title: 'Here is a Toast Title',
      body: 'Here is a Toast Body',
      showCloseButton: true,
      clickHandler: (t, isClosed): boolean => {
        console.log('i am clicked..', isClosed, t);

        // got clicked and it was NOT the close button!
        if (!isClosed) {

        }

        return true; // remove this toast !
      }
    };

    this.toasterService.pop(toast);
  }
}

live-demo: http://plnkr.co/edit/uL98EbfIBd6pm7bMU80V?p=preview

edited Dec 06 '16 at 11:18

answered Dec 06 '16 at 07:32

slaesh

16,659
6
50
52

Yw! See my update.. taking care of the close-button. – slaesh Dec 06 '16 at 07:41
Thanks, I think the clickHandler function we need to return a boolean value, as the interface of ClickHandler: export interface ClickHandler { (toast: Toast, isCloseButton?: boolean): boolean; } – Trinh Ngoc Dieu Dec 06 '16 at 08:58
Yep, if you return `true`, the toast will be removed: https://github.com/Stabzs/Angular2-Toaster/blob/28165e97f4ca40dabbc914fc0810a02232c15835/src/toaster-container.component.ts#L44-L61 – slaesh Dec 06 '16 at 11:18

score 1 · Answer 2 · answered Dec 06 '16 at 07:31

1

From the doc, you have the onShowCallback :

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onShowCallback: (toast) => {
    // stuff here
  }  
};

this.toasterService.pop(toast);

answered Dec 06 '16 at 07:31

soywod

4,377
3
26
47

Thank you, Soywod! – Trinh Ngoc Dieu Dec 06 '16 at 07:38

How to handle the event when click on Angular2-toaster pop-up

2 Answers2