ngx-toastit v1.0.2

ngx-toastit

An unobtrusive toast module for Angular. Demo

Usage

• Install toastit

npm i -S ngx-toastit

• Also install peer dependencies if you're missing them.
• Add ToastitModule to your project

@NgModule({
    declarations: [AppComponent],
    imports: [ToastitModule],
    bootstrap: [AppComponent]
})
export class AppModule { }

• Inject ToastitService when you want to add a toastit

public constructor(private toastitService: ToastitService) {}

public AddToastit(){
    this.toastitService.add(options: IToastit);
}

Methods

ToastitService.add(options: IToastit): number

Adds a toastit with the supplied options (Refer to options section for posible values). Returns added toastit id, you can use this for premature removing.

ToastitService.remove(id: number): void

Removes a toastit with the supplied id. This method will play exit animation. If a toastit is not found with this id, method will fail silently and will print a warning to console.

ToastitService.removeAll(): number

Removes all toastits from screen. This method will not play exit animations.

Options

Required

title: string = ''

Toastit title.

Optional

align: ToastitAlign = ToastitAlign.TR

The point where the toastit will appear. Default value is top right.

enterAnimation: any = ToastitAnimation.fadeIn

Animation config for entering toastits. Animations use material design motion for its easings and timings. Check the demo page for visualization.

leaveAnimation: any = ToastitAnimation.fadeOut

Animation config for exiting toastits. Animations use material design motion for its easings and timings. Check the demo page for visualization.

parent: string | Element = 'body'

Toasit parent, could be a selector string or Element.

timeout: number = 5

Toastit will wait x seconds before exiting.

type: ToastitType = ToastitType.Info

Toastit type.

message: string = ''

Toastit message.

observable: Observable<any> = undefined

If an observable is supplied, toastit will subscribe to it and exit after the observable is finished.

Styling

Toastit uses BEM notation for its classes and ViewEncapsulation.NONE in Angular so its styles can be customized in global scope with ease.