darioegb
NgxToastf
Features
- Toast Component Injection without being passed
ViewContainerRef - Animations using Angular's
Dependencies
Latest version available for each version of Angular
| ngx-toastf | Angular |
|---|---|
| 1.0.0 | 9.x 8.x 7.x |
Install
npm install ngx-toastf --save@angular/animations package is a required dependency for the default toast
npm install @angular/animations --saveSetup
step 1: Add NgToastModule to appModule, make sure you have BrowserAnimationsModule as well
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastf';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
NgToastModule // ToastrModule added
],
bootstrap: [App],
declarations: [App]
})
class MainModule {}step 2: Add icons styles to angular.json file in styles array
"styles": [
// other styles
"./node_modules/ngx-toastf/src/assets/fontello/css/all.min.css"
],Use
import { ToastrService } from 'ngx-toastf';
@Component({...})
export class YourComponent {
constructor(private toastService: NgToastService) {}
showToastSuccess() {
this.toastr.showToastSuccess('Hello world!', { title: 'Test!' });
}
}Options
There are global options.
Global Options
Global options include the following options:
| Option | Type | Default | Description |
|---|---|---|---|
| title | string | null | Title for toast message |
| position | object | see below | Toast container position |
| duration | number | 3000 | Time to live in milliseconds |
| closeButton | boolean | false | Show close button |
| tapDismiss | boolean | false | Close on click |
| autoClose | boolean | true | Dismiss current toast when max is reached |
position defaults
NgToastPosition {
BottomCenter = 0,
BottomFullWidth = 1,
BottomLeft = 2,
BottomRight = 3,
TopCenter = 4,
TopFullWidth = 5,
TopLeft = 6,
TopRight = 7,
Center = 8
};Styles
Global Styles
| Class | Description |
|---|---|
| toast-container | Toast container |
| toast-container-title | Toast container title, and symbol |
| toast-container-body | Toast container for message |
Toast type styles
For customizations styles you can overwrite those classes:
- .toast-container-success
- .toast-container-info
- .toast-container-warning
.toast-container-error
.toast-container { &-success { background-color: green !important; } &-error { background-color: pink !important; } }
License
MIT
GitLab @darioegb ·