Menu
What's the suggested way to achieve element invisibility in angular 2 (visibility:hidden not showing the element but keeping it space occupied)?. It have a [hide] directive but it seems to be similar to a display:none
419
visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
The only difference is: *ngIf will remove the element from DOM while [hidden] will tell the browser to show/hide an element using CSS display property by keeping the element in DOM.
The DOM representation of the hidden attribute is a property also called hidden , which if set to true hides the element and false shows the element. Angular doesn't manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.
Copy # Angular element = false; We will use *ngIf to display and hide our div based on the condition. As you can see in the above example, we have set a condition if the element is true , the div will be displayed, and if the condition is false , it will not display.
You can set the visibility style attribute with style binding:
<div [style.visibility]="'hidden'"></div> <div [style.visibility]="isDivVisible ? 'visible' : 'hidden'"></div> An example is shown in this plunker.
Edit: You could make a directive to make this easier: https://stackblitz.com/edit/angular-ivy-6sac33?file=src%2Fapp%2Fhide-element.directive.ts
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
