How to pass data object to ngx-toastr template?

Question

I'm trying to create a custom template for ngx-toastr - so i've followed this example below, (Example) what i can't figure out is how can i pass an object in the Message area - so the implementation will be like:

const DATA = {name:"Ron", site:"www.google.com"}

showWarning(DATA, title) {
    this.toastr.warning(message, title, {
      tapToDismiss: false,
      extendedTimeOut: 500000,
      timeOut: 1000000,
      progressBar: true,
      closeButton: true,
      enableHtml: true,
});

When i do pass object - it's not being parse - when i try to stringify it - i can't parse it back from the constructor of the PinkToast template.

import {
  animate,
  keyframes,
  state,
  style,
  transition,
  trigger
} from '@angular/animations';
import { Component } from '@angular/core';

import { Toast, ToastrService, ToastPackage } from '../lib/public_api';

@Component({
  selector: '[pink-toast-component]',
  styles: [`
    :host {
      background-color: #FF69B4;
      position: relative;
      overflow: hidden;
      margin: 0 0 6px;
      padding: 10px 10px 10px 10px;
      width: 300px;
      border-radius: 3px 3px 3px 3px;
      color: #FFFFFF;
      pointer-events: all;
      cursor: pointer;
    }
    .btn-pink {
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0);
    }
  `],
  template: `
  <div class="row" [style.display]="state.value === 'inactive' ? 'none' : ''">
    <div class="col-9">
      <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
        {{ title }}
      </div>
      <div *ngIf="message && options.enableHtml" role="alert" aria-live="polite"
        [class]="options.messageClass" [innerHTML]="message">
      </div>
      <div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite"
        [class]="options.messageClass" [attr.aria-label]="message">
        {{ message }} // trying to get message.name 
      </div>
    </div>
    <div class="col-3 text-right">
      <a *ngIf="!options.closeButton" class="btn btn-pink btn-sm" (click)="action($event)">
        {{ undoString }}
      </a>
      <a *ngIf="options.closeButton" (click)="remove()" class="btn btn-pink btn-sm">
        close
      </a>
    </div>
  </div>
  <div *ngIf="options.progressBar">
    <div class="toast-progress" [style.width]="width + '%'"></div>
  </div>
  `,
  animations: [
    trigger('flyInOut', [
      state('inactive', style({
        opacity: 0,
      })),
      transition('inactive => active', animate('400ms ease-out', keyframes([
        style({
          transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
          opacity: 0,
        }),
        style({
          transform: 'skewX(20deg)',
          opacity: 1,
        }),
        style({
          transform: 'skewX(-5deg)',
          opacity: 1,
        }),
        style({
          transform: 'none',
          opacity: 1,
        }),
      ]))),
      transition('active => removed', animate('400ms ease-out', keyframes([
        style({
          opacity: 1,
        }),
        style({
          transform: 'translate3d(100%, 0, 0) skewX(30deg)',
          opacity: 0,
        }),
      ]))),
    ]),
  ],
  preserveWhitespaces: false,
})
export class PinkToast extends Toast {

  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
    // JSON.strigify(toastPackage.message) not working
  }


}

Did you find solution? – johannesMatevosyan May 12 '22 at 10:30 — johannesMatevosyan, May 12 '22 at 10:30

score 1 · Answer 1 · answered Jun 29 '22 at 11:47

You can pass your data object via the IndividualConfig's payload:

const notification = {
        dataField1: "Bla",
        dataField2: true
}

this.toastrService.info("", "", {
        positionClass: 'toast-bottom-right',
        closeButton: true,
        toastComponent: MyToastComponent,
        toastClass: 'myToastComponent',
        payload: notification
    })

In your custom toastComponent you can access this payload via the toastPackage:

constructor(
  protected toastrService: ToastrService,
  public toastPackage: ToastPackage) {
   super(toastrService, toastPackage);
}

ngOnInit() {
  this.notification = this.toastPackage.config.payload;
}

How to pass data object to ngx-toastr template?

1 Answers1