Carbon: HowTo show toast notification VanillaJS

[mouadcherkaoui]

Summary

how to use Notification component using VanillaJS, more specifically how to show a notification !?

Relevant information

I tried this code:

var options = {
    type: 'warning',
    title: 'Notification title',
    subtitle: 'Subtitle text goes here.',
    timestamp: 'Time stamp [00:00:00]',
  };
var elements = document.getElementsByClassName("bx--toast-notification");
const bxNotification = CarbonComponents.Notification;
var notif1 = bxNotification.create(elements[0], options);

I also tried changeState() method:

notif1.changeState('add-notification');
notif1.changeState('show-notification');

but if I have a notification in the page and use changeState() to remove it its work:

notif1.changeState('delete-notification');

[asudoh]

Hi 👋 our vanilla code effective assumes that the notification is shown at the time the DOM is created. It means that you can just create the DOM to show the notification. The vanilla JavaScript code is there only to support the close button. Hope this makes sense.

[mouadcherkaoui]

Thanks, for the reply :)
there is no class to toggle which will trigger the show action?!

Best regards!

[asudoh]

If you want a style-based solution; You can add hidden attribute initially and remove it when you want to show it.

[mouadcherkaoui]

the idea is to use a css class to switch between display modes while applying an animation!
let say something like this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar