ngx-toastr
Demo:
1. Installation
npm install ngx-toastr --save
Requires dependency on @angular/animations
npm install @angular/animations --save
If you don't want to use this dependency, you can refer to (but usually installs aimations):
2. Add css style:
Add in .angular-cli.json
"
styles
"
: [
"
styles.scss
"
,
"
../node_modules/ngx-toastr/toastr.css
"
]
3. Root module injection:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; //需要
import {ToastrModule} from 'ngx-toastr';
...
imports: [
...
BrowserAnimationsModule,
ToastrModule.forRoot()
]
4. Use:
import {ToastrService} from 'ngx-toastr';
...
constructor(
public toastr: ToastrService
) {}
showSuccess() {
this
.
toastr
.
success
(
'
Hello world!
'
,
'
Toastr fun!
'
);
}
You can configure toastr, for example, display position, display time, display color, etc.
this.toastr.warning('Too high!', 'Warning!',
{
timeOut: 0,
closeButton: false,
positionClass: 'toast-top-center'
}
);
Specific configuration properties:
You can also view the starting Demo address.