I&#39;m currently developing a web app using Angular 7. I wanted to include ngx-toastr to send notifications to users but it isn&#39;t working as expected. When I trigger a toast nothing happens, except for a box in the size of a toast is appearing in bottom right corner but only when hovered over by the coursor.
Following an example of how I trigger the toastr function. Test is invoked by the click of a button. 

    import {ToastrService} from &#39;ngx-toastr&#39;;
    @Component({
      selector: &#39;app-action-controls&#39;,
      templateUrl: &#39;./action-controls.component.html&#39;,
      styleUrls: [&#39;./action-controls.component.scss&#39;]
    })
    export class Notification implements OnInit {
      test(){   
              this.toast.success(&quot;I&#39;m a toast!&quot;, &quot;Success!&quot;);
      }
     constructor(private toast: ToastrService) { }
    }
I includet the library css files in the angular.json file in my project like this: 

         ...        
         &quot;styles&quot;: [
            &quot;src/styles.scss&quot;,
            &quot;node_modules/bootstrap/scss/bootstrap.scss&quot;,
            &quot;node_modules/ngx-toastr/toastr.css&quot;
          ],
          ...
And like this in my app.module.ts file:

    ...
    import {BrowserAnimationsModule} from &#39;@angular/platform-browser/animations&#39;;
    import {ToastrModule} from &#39;ngx-toastr&#39;;
    ...
      imports: [
        ...
        BrowserAnimationsModule,
        ToastrModule.forRoot({
          timeOut: 1000,
          positionClass: &#39;toast-bottom-right&#39;
        })
       ]
    ...

I can&#39;t figure out what i&#39;m doing wrong, has anyone had similar experiences? Many thanks in advance!

All Toastr Solutions on Gang of Coders

Total of 1 Toastr Solutions

ngx-toastr, Toast not showing in Angular 7