Angular Forms Toast & snackbar Example

Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.

Get started with this example

Toast

Top or bottom, in a number of preset colors, use the toast to inform users. Perfect for feedback on data save, event creation and much more.

Javascript jQuery Angular React Vue

                        constructor(public notify: Notifications) { }

this.notify.toast({
    message: 'Message sent'
});

this.notify.toast({
    message: 'Message sent',
    display: 'top'
});

this.notify.toast({
    message: 'Message sent',
    color: 'primary'
});

this.notify.toast({
    message: 'Message sent',
    color: 'secondary'
});

this.notify.toast({
    message: 'Message sent',
    color: 'success'
});

this.notify.toast({
    message: 'Message sent',
    color: 'danger'
});

this.notify.toast({
    message: 'Message sent',
    color: 'warning'
});

this.notify.toast({
    message: 'Message sent',
    color: 'info'
});
                    

Snackbar

The snackbar can be rendered with or without and action. Actions can have custom labels and when clicked can call any custom code.

Javascript jQuery Angular React Vue

                        constructor(public notify: Notifications) { }

this.notify.snackbar({
    message: 'Your draft has been discarded',
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    display: 'top'
});

this.notify.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            this.notify.toast({
                message: 'Retrying...'
            });
        }
    }
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'primary'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'secondary'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'success'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'danger'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'warning'
});

this.notify.snackbar({
    message: 'Your draft has been discarded',
    color: 'info'
});
                    