What is the equivalent of ngShow and ngHide in Angular 2+?


I have a number of elements that I want to be visible under certain conditions.

In AngularJS I would write

<div ng-show="myVar">stuff</div>

How can I do this in Angular 2+?

This question is tagged with angular angular-components angular-template

~ Asked on 2016-02-23 12:50:27

The Best Answer is


Just bind to the hidden property


See also


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)


You can fix it by adding

[hidden] { display: none !important;}

To a global style in index.html.

another pitfall

hidden="{{isHidden}}" // isHidden = false;

are the same as


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.

~ Answered on 2016-02-23 12:51:10


Use the [hidden] attribute:


Or you can use *ngIf


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.

~ Answered on 2016-02-23 12:56:27

Most Viewed Questions: