Setting attributes hidden attribute manually not working

[32x0lf]

Hi,

I am trying to set the attributes hidden to false or true, but it is always hidden. I noticed, if attributes is hidden it is always hidden whether the value is false or true. Did I miss something?

        name: 'Process ',
        url: '/user/process',
        iconComponent: { name: 'cil-sync' },
        attributes:{ hidden: false},

note: I only set this attribute to this item only and the rest don't have attributes

Please advise and thanks in advance

[xidedix]

@32x0lf
it is the hidden html global attribute, and works as such, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

The hidden attribute is used to indicate that the content of an element should not be presented to the user. An empty string, or the keyword "hidden", set the element to the hidden state. Invalid values set the element to the hidden state as well.

[xidedix]

@32x0lf
In other words, you'll have to remove attribute hidden completely to unhide an element:
attributes: {hidden: null}
or
attributes: {hidden: undefined}

[32x0lf]

@xidedix but how to hide the item? I want to hide it if the user don't have permission as this was also your suggestion on this issue issue 60

[xidedix]

@32x0lf in this case you should generate (not mutate) navItems: INavData[] on the fly, depending on user role.
Btw - do not forget to use route guards for preventing unauthorised access.

[32x0lf]

@xidedix

Yes, I am using route guards as well but I want to hide it also. What do you mean by not mutate? Is hidden attributes works?

[xidedix]

@32x0lf
hidden attribute works for navItems as described
here: #175 (comment)
and here: #175 (comment)

Data structures in JS like objects and arrays are not immutable, but JS treats them as if they were immutable (they are passed by reference, which is immutable). To trigger change detection, you'll have to pass new array to [navItems].

[32x0lf]

@xidedix

you mean doing it in static way attributes : hidden don't work? because I was doing it in static at first to test the attributes but it was not doing what I expected.

[xidedix]

@32x0lf
I am lost. It works or not for you? You said at first:

if attributes is hidden it is always hidden whether the value is false or true

• with hidden attribute, the element should be hidden
• without hidden attribute, the element should be visible

[32x0lf]

@xidedix

It didn't work for me setting attributes to hidden: true

[32x0lf]

@32x0lf I am lost. It works or not for you? You said at first:

if attributes is hidden it is always hidden whether the value is false or true

• with hidden attribute, the element should be hidden
• without hidden attribute, the element should be visible

@xidedix

You mean whatever the value of the hidden attribute as long the hidden attribute is there it will be hidden?. I thought the value of hidden should be false or true based on your example.

[xidedix]

@32x0lf as explained here #175 (comment)

Valid values:

• An empty string "",
• the keyword "hidden"
• Invalid values also set the element to the hidden state (any value including true and false).

To remove hidden attribute, set
attributes: {hidden: null}
or
attributes: {hidden: undefined}

[32x0lf]

@32x0lf as explained here #175 (comment)

Valid values:

• An empty string "",
• the keyword "hidden"
• Invalid values also set the element to the hidden state (any value including true and false).

To remove hidden attribute, set attributes: {hidden: null} or attributes: {hidden: undefined}

@xidedix

Thank you so much. It works now for both static and dynamic.