angular6 use message box toast

angular6 toast plug-in can use a good number, in the present situation ngx-toastr usage and popularity over the past year can be said to Yiqijuechen, as shown below:

I also chose ngx-toastr this plug-in, use the following steps:

1, the installation ngx-toastr and its dependencies @ angular / animations

npm install ngx-toastr --save
npm install @angular/animations --save

 

2, was added css style of the angular-cli.json

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css"
]

 

3, the import the relevant modules app.module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from './app.component';
 
@NgModule({
  imports: [
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  bootstrap: [AppComponent],
  declarations: [AppComponent]
})
class AppModule {}

 

4, toast

import { ToastrService } from 'ngx-toastr';
 
@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}
 
  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

You can set toast disappearance time is 3 seconds:

this.toastr.success('Hello world!', 'Toastr fun!', {timeOut: 3000})

To toast to do some other configuration, see: https://github.com/scttcper/ngx-toastr#options