what is the difference between [hidden] in the div and using ng-show?

Question

I was going through the Angular 2 documentation and found the following:

<div [hidden]="name.valid || name.pristine"
 class="alert alert-danger">

There is no explanation on the [hidden] part. Is it a HTML property, CSS or Angular? Why isn't ng-show used instead?

`[hidden]="..."` is simply a one-way binding to [the HTML hidden attribute](https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden). — jonrsharpe, Nov 27 '16 at 09:39
@Sarahcartenz doesn't it? Could you clarify what that question is? `[...]` is Angular 2's binding syntax. You seem to be confusing Angular 1 and 2, why reference `ng-show`? — jonrsharpe, Nov 27 '16 at 09:42
Possible duplicate of [What is the equivalent of ngShow and ngHide in Angular2?](http://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular2) — jonrsharpe, Nov 27 '16 at 09:53

score 4 · Accepted Answer · answered Nov 27 '16 at 09:48

ng-show is a history of angular1. Before there was no hidden property (standard HTML, it is available starting from ie11) also all standard properties were covered by some similar angular directives which were doing the stuff.

This was a problem because it forced angular programmers to learn lots of directives.

Angular2 idea was to remove all unnecessary directives, and ng-show was one of them. Instead, angular2 introduced a property binding [hidden] which does the same job.

So the answer is: this is standard HTML property utilized by the angular2 property binding.

score 2 · Answer 2 · edited May 23 '17 at 12:17

hidden is a global HTML attribute. The square brackets indicate a property binding. Therefore

[hidden]="name.valid || name.pristine"

means "apply the hidden attribute to this element if the specified control is either valid or pristine". The browser will then render it but with display: none.

You could alternatively use *ngIf to remove the element from the rendered DOM entirely, see e.g. this answer for a comparison.

It's unclear why you reference ng-show, which was part of Angular 1 and no longer exists in 2.

what is the difference between [hidden] in the div and using ng-show?

2 Answers2