Toaster Module Name: ToasterModule
Module Name: ToasterModule
Toasters are message service components with bunch of features that be customized.
Showcase
Making it Work
Step One
First of all, you must inject the ToasterService
in the constructor
constructor( private toasterService: ToasterService ) {}
Step Two
Create a method that call the Toaster that will wish. For example: Calling the success Toaster.
Allowed Toaster Methods
this.toasterService.success(object?)
this.toasterService.danger(object?)
this.toasterService.information(object?)
this.toasterService.warning(object?)
clickMethod() {
this.toasterService.success({
title: 'My title',
message: 'My test message',
position: 'top-right',
width: '400px',
height: '70px',
progress: true,
showIcon: true,
time: 3000,
});
}
As parameter, you may have to pass the toaster config object.
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
height | string | 70px | The Toaster height. | px | % | em |
message | string | Message Description | The description of toaster | any text |
position | string | top-right | Set the position of toaster. | top-left | top-center | top-right | bottom-left | bottom-center | bottom-right |
progress | boolean | false | Controls whether the progressbar will be shown or not | true | false |
showIcon | boolean | true | Controls whether the icon will be shown or not | true | false |
time | number | 3000 | The time that toaster will be visible. | milliseconds |
title | string | Title ! | The title of toaster | any text |
width | string | 400px | The Toaster width. | px | % | em |