Laza92 Laza92 -4 years ago 155
AngularJS Question

AngularJS toaster individual toast position

I have configured toasts globally in html

<toaster-container toaster-options="{'close-button': true, 'position-class': 'toast-bottom-right'}"></toaster-container>


and here is how i pop them

core.toaster.pop({
type: 'info',
title: 'some title',
timeout: 0
});


I was wondering how I can position each toast individually and override global configuration from html. By default they are positioned bottom-right but for example I want one toast to be displayed top-right. Adding something like positionClass: 'toast-top-right' in toaster.pop doesn't work.

Answer Source

Try this,

You can create another toaster container for your toaster, which You need to locate in different location by the use of toaster_id.

See this plunker for working Model.

Hope, This one will be helpful...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download