12

Consider the following code sample:

<div *ngIf="condition; else elseBlock">
    <!-- markup here --> 
</div>
<ng-template #elseBlock>
     <div>
         <!-- additional markup here -->
     </div> 
</ng-template>

Another way I can achieve the same functionality is:

<div *ngIf="condition">
    <!-- markup here --> 
</div>
<div *ngIf="!condition">
     <!-- additional markup here -->
</div>

I want to know specific reasons for which of these two ways should be used and why?

Himanshu Arora
  • 2,368
  • 3
  • 22
  • 33
  • 1
    I would prefer to use elseBlock if the <-- markup here ---> is having many lines say more than 10 lines, it will also help others to know that there is a negate section which will be displayed. If the markup content is few lines say less than 10, two ngIf would be fine (my personal preference) – Chandre Gowda Jun 21 '17 at 17:36
  • 3
    To close-voters: No, it's not a matter of opinion. Although there are people that believe the earth is flat, that does not make the question of whether the earth is flat "primarily opinion-based". –  Jun 21 '17 at 17:41
  • I have reworded this question so that, it does not derive opinions without any facts. I guess now the question does not ask for any one's opinion but it seeks reasons for choosing one of the two ways, of achieving something. I would appreciate if this is now voted to open, as the answers, present reasons in support of the first option. @torazaburo I hope you would agree – Himanshu Arora Jun 21 '17 at 22:09
  • 1
    Yep, agree with non-close sentiment. There _is_ a non-opinion based answer to the question of when to use an `else` over two `if`s -- when you honestly want an `else`! This reduces to the question, "I saw code that said `if (a < 1) foo; if (a >= 1) bar;`. Is there an advantage to this over `if (a < 1) foo else bar;`?" And that advantage might be, "*Using else lets you avoid writing the condition twice, which could be a source of bugs*" & to DRY your code, as user663031/toazaburo remarks. – ruffin Jan 25 '19 at 22:33

2 Answers2

12

Using else lets you avoid writing the condition twice, which could be a source of bugs, so I would use that preferentially. You can also put the else template down at the bottom of your template if you so choose, which can make the template easier to read.

If you are unwrapping an observable with the async pipe, then it is much easier to write

<div *ngIf="myItems$ | async as myItems; else noItemsYet">

than to add another <div *ngIf="!(myitems | async)">, which would also force Angular to create another internal subscription.

Those voting to close this question as a matter of opinion are misguided. The fact that people might have different opinions on something does not mean that there are not valid points that are worth putting forward.

If using else was a matter of mere preference, I doubt the Angular developers would have prioritized it for Angular 4 as they did.

As @Ishnark points out, there may be performance implications as well.

  • On the other hand, with two `ngIf`s, you can keep using strongly typed member references etc, which is not possible with `ng-template` (without convoluted hacks). – molnarm Dec 14 '22 at 08:47
2

The first solution is better. Although both achieve the same thing, the first is cleaner and easier to follow logically.

You only do one check with the first solution. This is a good solution because:

  1. It takes time to evaluate a condition.
  2. By using else, you only have to check once. In your second solution you check if a condition is met (which takes time), and then you check if the not of the same condition is met.
  3. Using else allows you to have an action to do in the case that somehow neither of the conditions are met.

EDIT: See @toazaburo's answer, which addresses unsafeness.

Ishnark
  • 661
  • 6
  • 14
  • Ishnark and @toazaburo your answers make sense to me. Especially the fact that having an "else" besides an if makes it immediately clear that there is another template if this check fails. Also, performance wise if it follows the same rule of single check in case of "if-else" block versus two checks when we use two if statements, then yes I guess the first one should be used. Now another question, which one should I mark as the accepted answer? :-p – Himanshu Arora Jun 21 '17 at 18:14
  • I think @toazaburo 's solution applies more to your case (I'm assuming that the condition in your `ngIf` is relatively simple, so performance may not be an issue). – Ishnark Jun 21 '17 at 18:17
  • 1
    That's correct. Accepting his answer then. But thanks for your inputs as well :) – Himanshu Arora Jun 21 '17 at 18:18