44

In Angular2, let's say I want to conditionally display a <div> block. What's the difference between the following two ways.

  1. <div [hidden]=isLoaded>Hello World!</div> where isLoaded is a boolean in corresponding .ts file.

  2. <div *ngIf=isLoaded>Hello World!</div>

I do know that even if the <div> is not shown in the page, 1. still has the <div> in the DOM while 2. doesn't. Are there any other differences? What're the pros and cons of each of them?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Bing Lu
  • 3,232
  • 7
  • 30
  • 38
  • 1
    Given that you already know the difference, what do you actually want to know? – jonrsharpe Sep 29 '16 at 18:59
  • 2
    that's the difference.. let's consider the case,you have a dropdown of 100 cities. => your list be displayed as soon as you click on the dropdown as it is already on the DOM, while in other case list of cities will be created on DOM & then it would be displayed, so in this case it will appear after a certain delay. Depends on you how you want to use it. – Manish Sep 29 '16 at 19:04
  • @jonrsharpe i'm not sure if there are other differences and want to learn which way is preferred. By the way, I also don't know what's [class.hidden], why did you remove it from the question? – Bing Lu Sep 29 '16 at 19:13
  • Which is preferred is a meaningless question; should you use a hammer or a screwdriver? – jonrsharpe Sep 29 '16 at 19:16
  • 2
    http://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular2/35578093#35578093 – Günter Zöchbauer Sep 29 '16 at 20:15
  • 2
    @GünterZöchbauer your linked answer is exactly what I'm looking for, Thank you~ – Bing Lu Sep 29 '16 at 21:21

1 Answers1

53

The difference is that *ngIf will remove the element from the DOM, while [hidden] actually plays with the CSS style by setting display:none. However, the problem with [hidden] is that it can be overiden so the div, as in your case, would be displayed and you would be scratching your head why it doesn't work.

To sum things up, *ngIf and [hidden] are not the same at all. The former removes an element from DOM, while the latter toggles display CSS property.

Huske
  • 9,186
  • 2
  • 36
  • 53
  • @BingLu It binds to [hidden attribute](http://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone). – Estus Flask Sep 29 '16 at 19:45
  • It's not class hidden. It is an attribute that manipulates the CSS display property. – Huske Sep 29 '16 at 19:46
  • 1
    If you add `[hidden] { display: none !important;}` to your CSS setting `[hidden]` should work fine. See also http://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular2/35578093#35578093 – Günter Zöchbauer Sep 29 '16 at 20:14
  • 1
    Can one say that `[hidden]` is faster than `*ngIf`? – Skorunka František Oct 06 '17 at 10:34
  • @SkorunkaFrantišek to my understanding, rather the opposite. [hidden] keeps the object(s) in DOM and thus takes up memory and also other resources as Angular will keep tracking changes to these objects even if they are hidden. Thus, especially with large object trees, it would be beneficial to use *ngIf. However, adding to/removing from the DOM also carries a computational cost. One should probably test both options with, e.g., jsPerf if perfomance is paramount. – basse Jan 06 '18 at 21:41
  • It is not **ngIf will remove* it is not rendered, I know this is almost the same thing but its easier to understand when you get the methodology right. – Royi Mindel May 16 '18 at 10:50