I add [hidden]="true" to an HTML element in Angular, but the element is still visible. I noticed that when I remove the [] from around hidden, the element is now hidden as desired. Why won't [hidden]="true" work with brackets? I see many references to it on stackoverflow and elsewhere but can't get it to work. Is this deprecated?

CodePudding user response：

try this. hope it will help you.

<div [hidden]="'true'"><div/>

CodePudding user response：

It should work like you explained. Otherwise something else is overwriting hidden. For example:

Some styles can overwrite hidden. Styles and classes may be inherited from somewhere?

<input [hidden]="true" style="display: block">

It would be possible to explicitly not allow that. This might be useful if you don't want to change conflicting classes rather just force this on.

[hidden] {
  display: none !important;
}

Alternative could be to use dispaly: none:

<input [style.display]="'none'">

This input is hidden but still in the DOM.

CodePudding user response：

Thanks to everyone for your responses. I just realized this is because I'm trying to use this inside of index.html, which is outside of the Angular entry point.