# Font awesom icons - stuck. (Stacking)

**URL:** <https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592>\
**Category:** General\
**Created:** [10 June 2024 09:16 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592 "2024-06-10T09:16:46Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 June 2024 08:42 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/21 "2024-06-13T08:42:33Z")

</div>

You may find this page helpful:

> **[Node-RED Dashboard Template Examples (AngularJS)](https://it.knightnet.org.uk/kb/nr-qa/dashboard-template-examples/)**
>
> Some examples of using AngularJS with the Node-RED Dashboard.
> Not all features of Angular are accessible via the Dashboard.

There are other examples in the Node-RED Cookbook.

You have to extract the msg property to a `scope` variable which means that Angular can react to it.

---

<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:** [13 June 2024 08:51 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/22 "2024-06-13T08:51:30Z")

</div>

try

```auto
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-if="msg.showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

or

```auto
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-show="msg.showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 June 2024 08:52 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/23 "2024-06-13T08:52:57Z")

</div>

Thanks.

That is some serious reading.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 June 2024 08:53 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/24 "2024-06-13T08:53:50Z")

</div>

Thanks too Steve.

Um, but what do I send into the `template` node to change the icon?

`msg.showBan` `true` or `false`?

# (Sorry)

I'm not seeing a difference between the two blocks of code.

---

<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:** [13 June 2024 08:56 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/25 "2024-06-13T08:56:37Z")

</div>

Easy to find out, but working through it logically.

both versions use `msg.showBan`

breaking that down, to `show` and `ban` is a clue but the real nuts and bolts are

`ng-show="msg.showBan"` which means "show this element when `msg.showBan` is _truthy_ (e.g. not zero, not false, not `''`, `true`, `1`, `44`, `"hello ted"`)

---

<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:** [13 June 2024 08:57 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/26 "2024-06-13T08:57:05Z")

</div>

> [@Trying\_to\_learn](#):
>
> I'm not seeing a difference between the two blocks of code.

### ng-if

> [@Steve-Mcl](#):
>
> `<i ng-if="msg.showBan"`

### ng-show

> [@Steve-Mcl](#):
>
> `<i ng-show="msg.showBan"`

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 June 2024 09:00 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/27 "2024-06-13T09:00:25Z")

</div>

Ah! Sorry.

Looking good. My test worked, now applying to the real machine.

🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 June 2024 09:00 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/28 "2024-06-13T09:00:41Z")

</div>

> [@Trying\_to\_learn](#):
>
> That is some serious reading.

🤣

Yes, AngularJS is a _serious_ framework. One of the reasons I've never personally rated it for much of what happens when using Node-RED.

That page was my attempt at summarising some of the key things you might need to do when going beyond the simple stuff where D1 hides Angular from you.

This is also one of the reasons that UIBUILDER was born in the first place. If you are going to have to learn complex stuff, you might as well learn something that is as close to vanilla HTML/CSS as possible so that it has the widest possible use for you.

All of the frameworks suffer from the same issue. Namely that you reach a cliff edge as the complexity of your app increases and eventually you end up fighting the framework instead of it supporting you. This isn't so bad if everything you do is in the framework and if you have a team. It is pretty bad if you are a solo and only have to dip into the framework occasionally.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 June 2024 09:05 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/29 "2024-06-13T09:05:55Z")

</div>

Used:

```auto
<span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-show="msg.showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

```

Working!

Thanks @Steve-Mcl  
And thanks to @TotallyInformation for the link to read.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 June 2024 09:14 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/30 "2024-06-13T09:14:21Z")

</div>

(Sorry)

So looking at the two ways you posted.....

`<i ng-if="msg.showBan"......`  
and  
`<i ng-show="msg.showBan".....`

The line above _stacks_ the `signing`.  
That is _somehow_ always shown.

Then the `msg.showBan` is looked at (`true/false`) and if true the _second_ line is stacked onto it.  
I get that.

I'm not quite understanding the workings of the second way.  
Alas that's the one I copied and used. It works.  
I'll (try) to understand how it work rather than trying the other way.  
(Not saying this is the better option, but SOD's law....)

Ok, the first way you posted with the `if`  
I kind of get that.  
`ng-if` `msg.showBan` is `true` the rest of the line happens.

So the second way.....

`ng-show`.  
So that _shows_ the rest of the line if `msg.showBan` is true.

Yeah?

---

<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:** [13 June 2024 09:23 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/31 "2024-06-13T09:23:18Z")

</div>

> [@Trying\_to\_learn](#):
>
> `ng-show`.  
> So that _shows_ the rest of the line if `msg.showBan` is true.
> 
> Yeah?

No, it "shows" the **element**. The WHOLE THING from `<i` through to the end part `/>`

> [@Steve-Mcl](#):
>
> `ng-show="msg.showBan"` which means "show this element when `msg.showBan` is _truthy_

emphasis on **element**

  

Some advise if you dont mind - try to learn the parts of an element it will help future you and will make your questions clearer.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d28a81abda958d3c3f4adf42d71aacd94f18aa6.png)

---

<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:** [13 June 2024 09:26 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/32 "2024-06-13T09:26:19Z")

</div>

> [@Trying\_to\_learn](#):
>
> Ok, the first way you posted with the `if`  
> I kind of get that.  
> `ng-if` `msg.showBan` is `true` the rest of the line happens.
> 
> So the second way.....
> 
> `ng-show`.  
> So that _shows_ the rest of the line if `msg.showBan` is true.

To further clarify:

`ng-if` means add/remove the full element from the DOM (e.g. looking at the HTML source - the element will not even be present if `ng-if` is falsey

`ng-show` means show/hide full element from the user (e.g. looking at the HTML source - the element WILL be there but it will be hidden from user view (probably sets `display` style to `hidden` or similar))

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [13 June 2024 09:39 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/33 "2024-06-13T09:39:33Z")

</div>

Ok, thanks.

Thanks for the clarity of terms.

I believe I was kind of right - what I was meaning to say - and what you just said.  
I just didn't get the terms right.

> [@Steve-Mcl](#):
>
> No, it "shows" the **element**. The WHOLE THING from `<i` through to the end part `/>`

That is what I meant.

The line starts with an `<i` and ends with a `</i>`

But I guess I need to use the right terms.  
The start of knowledge is calling things by their correct name. 😉

> [@Steve-Mcl](#):
>
> `ng-if` means add/remove the full element from the DOM (e.g. looking at the HTML source - the element will not even be present if `ng-if` is falsey
> 
> `ng-show` means show/hide full element from the user (e.g. looking at the HTML source - the element WILL be there but it will be hidden from user view (probably sets `display` style to `hidden` or similar))

Ok, I think I can understand that.

`if` puts the code in the `DOM` but `show` puts it in, but it may/not be shown.

I'll need to think about it more.

But again: Thanks.  
And sorry for the slow reply.  
Dinner was begging.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 June 2024 11:05 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/34 "2024-06-13T11:05:27Z")

</div>

> [@Steve-Mcl](#):
>
> Some advise if you dont mind

I like that infographic Steve, where was it from? I'd like to "borrow" it for the UIBUILDER documentation. 😀

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 June 2024 11:11 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/35 "2024-06-13T11:11:00Z")

</div>

> [@Trying\_to\_learn](#):
>
> `if` puts the code in the `DOM` but `show` puts it in, but it may/not be shown.
> 
> I'll need to think about it more.

That's correct. You can map this directly to CSS attributes `visibility` and `display`. The main thing is that an invisible element still impacts the DOM layout (e.g. may take up space) whereas `display:none` does not. This has potential knock-on performance and usability impacts due to DOM reflow, the whole thing is described in more detail here:

> <https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone>

---

<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:** [27 June 2024 11:11 UTC](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592/36 "2024-06-27T11:11:05Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/font-awesom-icons-stuck-stacking/88592.md?page=1)