What is the equivalent of ngShow and ngHide in Angular 2+?
I find myself in the same situation with the difference than in my case the element was a flex container.If is not your case an easy work around could be
[style.display]="!isLoading ? 'block' : 'none'"
in my case due to the fact that a lot of browsers that we support still need the vendor prefix to avoid problems i went for another easy solution
[class.is-loading]="isLoading"
where then the CSS is simple as
&.is-loading { display: none }
to leave then the displayed state handled by the default class.
The hidden
property can be used for that
[hidden]="!myVar"
See also
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
issues
hidden
has some issues though because it can conflict with CSS for the display
property.
See how some
in Plunker example doesn't get hidden because it has a style
:host {display: block;}
set. (This might behave differently in other browsers - I tested with Chrome 50)
workaround
You can fix it by adding
[hidden] { display: none !important;}
To a global style in index.html
.
another pitfall
hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;
are the same as
hidden="true"
and will not show the element.
hidden="false"
will assign the string "false"
which is considered truthy.
Only the value false
or removing the attribute will actually make the element
visible.
Using {{}}
also converts the expression to a string and won't work as expected.
Only binding with []
will work as expected because this false
is assigned as false
instead of "false"
.
*ngIf
vs [hidden]
*ngIf
effectively removes its content from the DOM while [hidden]
modifies the display
property and only instructs the browser to not show the content but the DOM still contains it.
Use the [hidden]
attribute:
[hidden]="!myVar"
Or you can use *ngIf
*ngIf="myVar"
These are two ways to show/hide an element. 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.