Angular 7- Custom Toastr - Found the synthetic property @flyInOut. Include BrowserAnimationsModule in your app

Question

I want to display toast notifications after some actions but I want a custom toast component to be displayed. I've created it and configurated like the following:

In my app.module:

 imports: [
    ToastrModule.forRoot({
      positionClass: "toast-top-left",
      toastComponent: myCustomToastComponent
      }),
     ]
 entryComponents: [
   myCustomToastComponent
 ]

Then I have my custom component.ts:

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

@Component({
  selector: "app-ribbon",
  templateUrl: "./ribbon.component.html",
  styleUrls: ["./ribbon.component.scss"]
})
export class myCustomToastComponent extends Toast {

  @Input() messageText: string;

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

the html:

<div class="custom-ribbon-container">
    {{ messageText }}
</div>

and the css:

.custom-ribbon-container {
  border-color: green;
  -moz-border-radius: 15px;
  border-radius: 15px;
  width: 400px;
  height: 30px;
}

I call the toastr service in another component:

showToaster() {
    this.toastr.success("testing toast message", "title");
  }
}

and here's the html:

<button (click)="showToaster()">
      Show Toaster
    </button>

The problem here is that it's not displaying my custom toast component, it displays the default one from the toastr package. and on the console it's showing this error: "Found the synthetic property @flyInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application." What I'm missing?

Pd: I already installed the BrowserAnimations and included it on app.module

Answer 1

I think that is a problem with custom toastr. ngx toastr is expecting an flyinout animation, so you need to add one.

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,
        }),
      ]))),
    ]),
  ]

I copied this from an example in their own github.

Check this stackblitz

example