Angular2 Toasty component shows growl-style alerts and messages for your application.
Installation :
npm install ng2-toasty --save
Import :
import {ToastyModule} from \'ng2-toasty\';
Add this tag to the component HTML :
<ng2-toasty [position]=\"\'top-center\'\"></ng2-toasty>
Import ToastyModule.forRoot() in the NgModule of your application. The forRootmethod is a convention for modules that provide a singleton service.
@NgModule({
imports: [
BrowserModule,
ToastyModule.forRoot()
],
bootstrap: [AppComponent]
})
Import the module to your component ts file.
import {ToastyService, ToastyConfig, ToastOptions, ToastData} from \'ng2-toasty\';
Setup the method for the Alert and Messages :
addToast() {
// Just add default Toast with title only
this.toastyService.default(\'Hi there\');
// Or create the instance of ToastOptions
var toastOptions:ToastOptions = {
title: \"My title\",
msg: \"The message\",
showClose: true,
timeout: 5000,
theme: \'default\',
onAdd: (toast:ToastData) => {
console.log(\'Toast \' + toast.id + \' has been added!\');
},
onRemove: function(toast:ToastData) {
console.log(\'Toast \' + toast.id + \' has been removed!\');
}
};
// Add see all possible types in one shot
this.toastyService.info(toastOptions);
this.toastyService.success(toastOptions);
this.toastyService.wait(toastOptions);
this.toastyService.error(toastOptions);
this.toastyService.warning(toastOptions);
}
You can hire Angular developer in India from Web Idea Solution with sound Skills in Angular Web application development. Our Dedicated Angular developers are not just to develop applications for one particular industry instead they are experts in the various business verticals.
