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.

| type | info | | ---- | ---- | | ToastitAlign.TR | Top right | | ToastitAlign.TC | Top center | | ToastitAlign.TL | Top left | | ToastitAlign.BR | Bottom right | | ToastitAlign.BC | Bottom center | | ToastitAlign.BL | Bottom left |

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.

| type | | ---- | | ToastitAnimation.fadeIn | | ToastitAnimation.shrinkIn | | ToastitAnimation.slideInLeft | | ToastitAnimation.slideInRight | | ToastitAnimation.slideInTop | | ToastitAnimation.slideInBottom | | ToastitAnimation.scaleIn |

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.

| type | | ---- | | ToastitAnimation.fadeOut | | ToastitAnimation.shrinkOut | | ToastitAnimation.slideOutLeft | | ToastitAnimation.slideOutRight | | ToastitAnimation.slideOutTop | | ToastitAnimation.slideOutBottom | | ToastitAnimation.scaleOut |

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.

| type | info | | ---- | ---- | | ToastitType.Info | Used for info messages | | ToastitType.Pin | Pinned toastits will remain in place until you remove it manually | | ToastitType.Progress | Progress toastit, used in conjunction with observables, has an animation icon | | ToastitType.Success | Used for success messages | | ToastitType.Warning | Used to show error messages |

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.

| class | info | | ----- | ---- | | .toastit | Main toastit class | | .toastit--info | Type added main class | | .toastit--align-top-right | Align added main class | | .toastit__icon | Icon class | | .toastit__icon--info | Type added icon class | | .toastit__content | Parent class of title and message | | .toastit__title | Title class | | .toastit__title--info | Type added title class | | .toastit__message | Message class | | .toastit__message--info | Type added message class |