Angular 2+ shows nice looking custom alerts and messages

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.