@eff-custom-plugins/toast
v1.0.4
Published
toast message plugin (angular 14.0.5)
Downloads
10
Maintainers
Readme
Toast
This library was generated with Angular CLI version 14.0.5.
Installation
NPM
npm i @eff-custom-plugins/toast
Usage
Html
<ngx-toast></ngx-toast>
Attributes
Attributes | Description -----------|------------ @Input() closeIconClass: string | Custom class for custom close button.
Toast properties (IToast)
All the properties are optional.
Properties | Description -----------|------------ callback: (toast: IToast) => {} | Callback function to execute on details button click. clickToRoute: string | Set the 'url' to navigate. closableType: ToastTypeEnum | Use this type, if you want to close all by current type. Acceptable types are: INFO, ERROR, WARNING, SUCCESS. closeOnClickDetails: boolean | Set true if you want to close toast on details button click. detailsButtonInline: boolean | Set true if you want the details button be inline. detailsButtonText: string | Text for details button. detailsText: string | Additional details text (will be shown after the message). detailsTextClass: string | Custom class for detailsText. expanded: boolean | Set this property 'true' if you've added optional properties (like 'title', 'detailsText', etc...). hasIcon: boolean | Set true if you want additional icon with your message. You can add your custom icon class with "messageIconClass" property. Defalut icon is loading. id: any | Id for identifying current toast. keepInRouteChange: boolean | Set true if you want to keep the toast after route change. keepSameMessageToasts: boolean | Set true if you want to show more than one toasts at the same time with matching texts. message: string | Toast message. messages: string[] | Toast messages as array, if you've more than one message in array. messageIconClass: string | Add custom class to add icon before message text. (Also you'll need to add hasIcon: true) timeout: number | Toast message showing duration. title: string | Toast message title. type: ToastTypeEnum | One of these types: INFO, ERROR, WARNING, SUCCESS. setCustomTimer: boolean | Set true if you want us to check message's text's length and add toast showing duration according to the message length.
Example and Sample Code
- Import 'ToastModule', 'RouterModule' and 'BrowserAnimationsModule' in your app module
import { RouterModule } from "@angular/router";
import { ToastModule } from "@eff-custom-plugins/toast";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@NgModule({
imports:[
..
ToastModule.forRoot(),
BrowserAnimationsModule,
RouterModule.forRoot([])
..
]
})
- Add 'ngx-toast' in your component html
<ngx-toast closeIconClass="my-custom-close-class"></ngx-toast>
- Add styles and assets folder in your angular.json
"styles": [
..
"node_modules/@eff-custom-plugins/toast/lib/assets/sass/toast.scss"
..
]
- Add 'ToastService' in ts
import {ToastService} from "@eff-custom-plugins/toast";
class Demo {
constructor(private toastService: ToastService) {}
}
- ** Call desired function from toastService **
/*Method to listen for onChange event from timesheet*/
private callToasts(): void {
this.toastService.success('I am a success message!');
this.toastService.warn('I am a warning message!', {hasIcon: true, id: 'id', timeout: 6000});
this.toastService.error('I am an error message!', {detailsText: 'Some more info about error', expanded: true});
this.toastService.info('I am an info message!', {title: 'Info title', expanded: true, timeout: 7000});
this.toastService.close('id');
this.toastService.clearAll();
}
- You're done. Run your app. cheers!