How to pass in custom data for BodyOutputType.Component?

[phillipgreenii]

I am trying to generate a custom toaster which includes custom error information. However, there doesn't seem to be any property on Toast that I could use to store this custom information. I tried forcing it in by casting my Toast instance to any, but then my templates don't compile because the AOT compiler detects in my template that there is no property of data on Toast. What am I missing?

[Stabzs]

It's a little bit unclear what you're trying to do. Typically when using Component you would store the data on the component instance itself, not the toast.

Does http://plnkr.co/edit/GC3c9j?p=preview help you at all? If not, can you create a plunker illustrating exactly what you are currently attempting? Thanks!

[phillipgreenii]

So, in the example you have

popMaterialToast() {
  var toast: Toast = {
          type: 'error',
          title: 'Title text',
          body: MaterialComponent,
          bodyOutputType: BodyOutputType.Component,
          timeout: 0
  };
  this.toasterService.pop(toast);
}

How would I initialize MaterialComponent with data only known at the time of the pop?

So in my example I have ErrorComponent and I need to pass in the error code, message, list of problems, and a timestamp. The only way I was able to make this work is

this.toasterService.pop({
            title: message.title,
            body: ErrorComponent,
            bodyOutputType: BodyOutputType.Component,
            data: { /* my data*/ }
} as Toast);

And then in my component

export class ErrorComponent{
    public toast: Toast;

    constructor() { }

    get data(): UserNotificationToastData {
        return (this.toast as any).data;
    }
}

My properties are now exposed to my template via data property. But this seems a bit hacky and I was hoping there was something I had missed about the Angular2-Toaster API that would allow for this in a more straight forward manor.

[Stabzs]

@phillipgreenii Thanks for the thorough explanation!

No, this was not part of the API. As a result, I've expanded the toast.ts object in a 4.0.0 release to expose a data: any property on the toast instance. This should satisfy your requirements without a cast.

[phillipgreenii]

Everything is working great; thanks for the quick response.

[Stabzs]

You're very welcome! Thanks for the confirmation!