0.0.1 • Published 2 years ago
@thaisrr/ngx-toaster v0.0.1
Ngx-Toaster
Ngx-Toaster is a library for Angular, designed to create alerts and toasts easily. There are four levels of alerts: success, info, warning, and error. It is possible to configure the disposition of the toasts, and the colors used are WCAG compliant (level AAA).
Installation
- Import NgxToasterModule in the desired module (e.g., AppModule).
- Add the
<ngx-toast></ngx-toast>
tag in the desired component (e.g., AppComponent). - Inject NgxToastService where you want to create a toast (e.g., a component or another service).
- Use the create method to create the toast with the desired configurations.
In you module
import {NgxToastModule} from "./ngx-toast.module";
import {NgModule} from "@angular/core";
@NgModule({
declarations: [/* your components or pipes */],
imports: [
NgxToastModule,
/* your other imports */
]
})
In your template
The <ngx-toaster></ngx-toaster>
component should be placed where you want yours
toasts to be displayed.
If you use the toaster in your entire application, we recommend that you
import the toast in AppModule, and put the tag in app.component.html, at
the bottom of the template.
Usage
Creating a toast
To display a toast, you only need to inject NgxToastService, and use the methode create()
.
The create()
methode take an object as parameter, to configure the toast :
message : string
( required ) the message you want to display,level : string
( success, info, warn, error ) the level of the alerte. Default isinfo
,icon : string
the name of the icon you want to display. Default is material icon ''info',duration : number
( 3000, 5000, 8000, 10000 ) the time, in ms, you want your toast to be displayed. Default is '5000'
Basic Exemple
import { Component } from '@angular/core';
import { NgxToastService } from 'ngx-toaster';
@Component({
selector: 'app-root',
template: `
<button (click)="showToast()">Show Toast</button>
<ngx-toast></ngx-toast>
`
})
export class AppComponent {
constructor(private toastService: NgxToastService) {}
showToast() {
this.toastService.create({
message: 'Hello World!',
level: 'success',
duration: 3000,
icon: 'info'
});
}
}