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?
try this. hope it will help you.
<div [hidden]="'true'"><div/>
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.
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.