Angular toastr2 doesnt shows up

Question

So I am trying to do toastr in many ways but it's not working. Heres doc: https://www.npmjs.com/package/angular2-toaster?activeTab=readme My HTML:

<button (click)="test()">Make a toast!</button>

MY TS:

import {ToasterService} from 'angular2-toaster';

constructor ( private router: Router, private toastr: ToasterService ) { }

 test() {
this.toastr.pop('success', 'Success', 'The Joke has been added');

}

App HTML:

 <toaster-container>

</toaster-container>
<router-outlet></router-outlet>

My app.module:

import { ToasterModule } from 'angular2-toaster';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    PagesModule,
    HttpClientModule,
    NgbModule,
    CommonModule,
    BrowserAnimationsModule,
    ToasterModule.forRoot(),
  ],

Also in my angular.json have:

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "./node_modules/angular2-toaster/toaster.css",
              "src/styles.css"

I Have no idea why that's not working. Any suggestions ?