# Angular Notifications

**URL:** <https://discourse.nodered.org/t/angular-notifications/47232>\
**Category:** Dashboard\
**Created:** [16 June 2021 12:25 UTC](https://discourse.nodered.org/t/angular-notifications/47232 "2021-06-16T12:25:38Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [16 June 2021 12:25 UTC](https://discourse.nodered.org/t/angular-notifications/47232/1 "2021-06-16T12:25:39Z")

</div>

hi Can you use Angular Notifications

> **[Angular Notification Components And Directives - Angular Script](https://angularscript.com/category/notification/)**
>
> Latest free Angular notification components, directives, and other related libraries for web & mobile applications.

in red dashboard  
I am interested in such

# ngx-Notifications

> **[Simple Notification Library For Angular 5+ - ngx-notifications | Angular Script](https://angularscript.com/simple-notification-library-angular-5-ngx-notifications/)**
>
> ngx-notifications is a simple library that allows you to notify your users in your Angular 5+ app.

# Soft Notifications

> **[Soft Notifications Component For Angular 5+ | Angular Script](https://angularscript.com/soft-notifications-component-angular-5/)**
>
> A Soft Notifications component for Angular 5.0+ that shows silent chat notification or alert notification to users without disturbing the current operation on the screen.

How are they used with NR Dashboard ???

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 June 2021 12:36 UTC](https://discourse.nodered.org/t/angular-notifications/47232/2 "2021-06-16T12:36:08Z")

</div>

Those libraries are both angular 5+.

Dashboard is built on Angular.js (or v1 if you like)

In short, they won't work

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [16 June 2021 12:38 UTC](https://discourse.nodered.org/t/angular-notifications/47232/3 "2021-06-16T12:38:20Z")

</div>

ok thanks to reply  
this work in v1

> **[Simple Toast Notification Service For Angular | Angular Script](https://angularscript.com/simple-toast-notification-service-angular/)**
>
> Angularjs-toast is a simple service for creating toast notification for AngularJS pages.

how can used

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 June 2021 12:57 UTC](https://discourse.nodered.org/t/angular-notifications/47232/4 "2021-06-16T12:57:56Z")

</div>

I don't know the answer to your question, but there is a Notification node (ui-toast) in the node red dashboard that may do what you want.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [16 June 2021 13:03 UTC](https://discourse.nodered.org/t/angular-notifications/47232/5 "2021-06-16T13:03:02Z")

</div>

but ui-toast  
not Configurable Colour or style

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 June 2021 13:06 UTC](https://discourse.nodered.org/t/angular-notifications/47232/6 "2021-06-16T13:06:03Z")

</div>

I didn't say it _would_ do what you want, I said it _may_ do what you want. It may be possible to style it using css, but I don't know about that.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [16 June 2021 13:11 UTC](https://discourse.nodered.org/t/angular-notifications/47232/7 "2021-06-16T13:11:17Z")

</div>

i want styling color and transparent background body and title color according to type of notification error, info,warn ....etc  
error -\> red  
info -\> green  
warning -\> orange

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 June 2021 15:01 UTC](https://discourse.nodered.org/t/angular-notifications/47232/8 "2021-06-16T15:01:40Z")

</div>

By a bit of an ugly hack, I add a `<script>` to the payload that sets the `md-toast` element class & use a head template to setup notification styles

![MMrUWUaBQr](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d5d52442008aa3158ac9dbb495541e50e53e14be.gif)

Import and adjust the styles to your liking.

```auto
[{"id":"f4b7f5d47f78fcfc","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"class","v":"notification-error","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"ERROR","payload":"An error happened","payloadType":"str","x":2400,"y":180,"wires":[["9cbdb5b6a574ddd9"]]},{"id":"07e9633b37b26775","type":"ui_toast","z":"553814a2.1248ec","position":"top right","displayTime":"5","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":true,"topic":"","name":"","x":2760,"y":240,"wires":[]},{"id":"887c3c77e479e52e","type":"ui_template","z":"553814a2.1248ec","group":"dce9e7a2.d20c78","name":"notification styles","order":10,"width":0,"height":0,"format":"<style>\n md-toast.notification-info {\n border-width: 10px;\n border-color: darkgreen;\n }\n md-toast.notification-info > h3 {\n background-color: green;\n }\n md-toast.notification-info > div {\n background: rgba(0, 255, 0, 0.5);\n color: darkgreen;\n }\n\n\n md-toast.notification-warn {\n border-width: 10px;\n border-color: darkorange;\n }\n md-toast.notification-warn > h3 {\n background-color: orange;\n }\n md-toast.notification-warn > div {\n background: rgba(245, 173, 66, 0.5);\n color: darkorange;\n }\n \n\n md-toast.notification-error {\n border-width: 10px;\n border-color: darkred;\n }\n md-toast.notification-error > h3 {\n background-color: red;\n }\n md-toast.notification-error > div {\n background: rgba(255, 0, 0, 0.5);\n color: darkred;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":2770,"y":200,"wires":[[]]},{"id":"9cbdb5b6a574ddd9","type":"function","z":"553814a2.1248ec","name":"add style","func":"var cls = msg.class || 'notification-info';\n\nmsg.payload = `${msg.payload}\n<span class=\"${cls}\" style=\"display: none\"></span>\n<script>\n \\$(\"div.md-toast-content span.${cls}\").closest(\"md-toast\").addClass(\"${cls}\");\n</script>\n`\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2600,"y":220,"wires":[["07e9633b37b26775"]]},{"id":"372dc9715e13dbc4","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"class","v":"notification-info","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"INFO","payload":"Some info","payloadType":"str","x":2360,"y":220,"wires":[["9cbdb5b6a574ddd9"]]},{"id":"274974bef8ef7e49","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"class","v":"notification-warn","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"WARN","payload":"This is a warning","payloadType":"str","x":2390,"y":260,"wires":[["9cbdb5b6a574ddd9"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

* * *

@dceejay - this has gotta be one of those times where allowing users to enter a class would really simplify overriding styles. I think it could be really useful (even if it is an advanced feature)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 June 2021 21:18 UTC](https://discourse.nodered.org/t/angular-notifications/47232/9 "2021-06-16T21:18:24Z")

</div>

Happy to look at a PR

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 June 2021 21:20 UTC](https://discourse.nodered.org/t/angular-notifications/47232/10 "2021-06-16T21:20:54Z")

</div>

I am happy to take a look Dave but we might get wrong off @hotNipi 😉

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [17 June 2021 03:58 UTC](https://discourse.nodered.org/t/angular-notifications/47232/11 "2021-06-17T03:58:41Z")

</div>

How the hell I managed myself into this situation 😃

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [17 June 2021 09:51 UTC](https://discourse.nodered.org/t/angular-notifications/47232/12 "2021-06-17T09:51:44Z")

</div>

thank man

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 July 2021 09:52 UTC](https://discourse.nodered.org/t/angular-notifications/47232/13 "2021-07-17T09:52:16Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.