Angular 7 - Custom toastr not showing message

Question

I've created a custom toastr notification component like this:

import { Component, Input } from "@angular/core";
import { Toast, ToastrService, ToastPackage } from "ngx-toastr";
import { trigger } from "@angular/animations";

@Component({
  selector: "app-ribbon",
  templateUrl: "./ribbon.component.html",
  styleUrls: ["./ribbon.component.scss"],
  animations: [
    trigger("flyInOut", []),
  ]
})

export class RibbonComponent extends Toast {
  constructor( protected toastrService: ToastrService, public toastPackage: ToastPackage) {
    super(toastrService, toastPackage);
    }
  }

With it's own css styling. I've configured my app.module file like this:

 imports: [
      ToastrModule.forRoot({
        toastComponent: RibbonComponent,
      })]

And when I try to use the toastr service like this:

 showToaster() {
      this.toastr.success("Message Test");
  }
}

In another component it displays my component but with no message text at all, only the empty component

What's missing here?

Imported service name is "toastrService" but in showToaster() function you are using as "toastr" try change that to "toastrService" — Rahul Raveendran, Aug 12 '19 at 18:50
that's not the problem, I've tried a lot I don't know why the message it's empty on my custom component — pedrodotnet, Aug 12 '19 at 19:03
1. Try Importing like this in your app.module `imports: [ ToastrModule.forRoot()]` 2. Use `constructor( private toastrService: ToastrService,`) — Rahul Raveendran, Aug 12 '19 at 19:11
But like that it will display the default toast component, I want to display my custom one — pedrodotnet, Aug 12 '19 at 19:16
Take a look at this post: https://stackoverflow.com/questions/53989445/ngx-toastr-toast-not-showing-in-angular-7# — WebBrother, Nov 21 '19 at 14:46

Angular 7 - Custom toastr not showing message

0 Answers0