Ngx-toastr: Feature Request: Pass data to custom component

[shyamal890]

Is there a way we can pass data to custom component from toast options?

[shyamal890]

@scttcper any thoughts?

[scttcper]

when you create your toast using success/error/show it returns type ActiveToast

You can access the component and set props directly onto the component. activeToast.toastRef.componentInstance

[intellix]

Was wondering how to do this myself. Might be good in the FAQ

[GaurangRLB]

Is there any example of this??

[abhi901abhi]

Can you pls give some example..

[wsh92]

@abhi901abhi @GaurangRLB
I am able to pass input parameters to the custom component after working for almost 2 days. Here is the example.

Custom Component:

@Component({
  selector: 'app-custom',
  template:` <div>{{inputValue}}</div>`
})
export class CustomComponent implements OnInit {
  @Input() inputValue: any;
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,) {
     }
  ngOnInit() {
     }
}

AppComponent:

import { ToastrService,GlobalConfig,ToastContainerDirective,ToastPackage } from 'ngx-toastr';
import { cloneDeep, random } from 'lodash-es'; // install --npm i lodash-es
import { CustomComponent } from './custom/custom.component .'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

constructor(private toastr: ToastrService){ }

ngOnInit() {
this.showCustomNotifications()
}
showCustomNotifications(){
const opt = cloneDeep(this.optionsToaster);
const opt = cloneDeep(this.optionsToaster);
            opt.toastComponent = NotificationAlertComponent;
            opt.toastClass = 'pinktoast';
            const { message, title } ={
                message: "Hi This toaster",
                title: "Custom Notification",
              }
            const activeToast = this.toastr.show(message, title, opt); //This will return active toast 
            activeToast.toastRef.componentInstance.inputValue= pushAlert; // use the component instance to send the input parameters
            this.optionsToaster.onActivateTick = true; // change detection to for notification content to update
            if (activeToast && activeToast.toastId) {
              this.lastInserted.push(activeToast.toastId);
            }
            return activeToast;
}
}

In the module, register your custom component

declarations[AppComponent,app-custom],
entryComponents[app-custom] and imports[app-custom],
bootstrap: [AppComponent],
imports:[ ToastrModule.forRoot(
            {toastComponent: CustomComponent}
        )]

[GaurangRLB]

Thanks @wsh92

[julmot]

Example from my app:

  private createToast(
    name: string | null,
    image: IImage | null,
    type: 'success' | 'error',
  ): void {
    const toast = this.toastr.success(null, name, {
      toastComponent: AddToCartToastComponent,
      closeButton: true,
      tapToDismiss: false,
      timeOut: 5000,
      extendedTimeOut: 5000,
    });
    toast.toastRef.componentInstance.status = type;
    if (image) {
      toast.toastRef.componentInstance.image = image;
    }
  }