Angular ngIf with multiple statements in else

Question

How do you write ngIf with multiple statements under else ? I have a feeling I am doing something silly but surprised to not find anyone else in this situation other than me. *ngIf=col !='actions'; else showActions;iWouldLiketoAddAnotherAssignmentHere;

if(condition){
statement1;
statement2;
}else
{statement3;
 statement4;
 statement5;
}

Just because someone doesnt understand the question doesn't mean the question isnt clear.This is why I left SO the last time , stop marking questions you dont understand and let others who understand answer it or ignore it.

Thank you, i did look at that but doesn't fulfill my requirement. I didnt think I would get stuck at something as simple as this but here I am. Isnt there any way I can have more than one statement when a if condition evaluates to true or false? — WhatsInAName, May 11 '20 at 19:27
Please [edit] your question and expand your example, perhaps include code as you would like to use it even though it does not work. As it is currently written I am not sure exactly what it is you are trying to do. — Igor, May 11 '20 at 19:29
Please check my updated answer, I hope I have figured out what you were actually looking for. — T. Sunil Rao, May 12 '20 at 12:00

Poul Kruijt · Answer 1 · 2020-05-11T20:20:02.087

2

Are you by any chance looking for then else?

<ng-container *ngIf="col !='actions'; then noActions; else showActions;></ng-container>

<ng-template #noActions>
 I have no actions
</ng-template>

<ng-template #showActions>
 I have some actions
</ng-template>

You can even extend this with multiple

<ng-container *ngIf="col !='actions'; then noActions; else (col === 'actions' && showActions) || (something === 3 && somethingElse)";></ng-container>

<ng-template #noActions>
 I have no actions
</ng-template>

<ng-template #showActions>
 I have some actions
</ng-template>

<ng-template #somethingElse>
 I have some something else
</ng-template>

edited May 11 '20 at 20:20

answered May 11 '20 at 19:48

Poul Kruijt

69,713
12
145
149

Thank you for the code snippet but this again drives the point that you cannot have more than one statement in the if or else condition – WhatsInAName May 12 '20 at 02:25
I don't know what you mean with more than one statement. It sounds like you are looking for: ``. You can use a normal logical expression in the templates, chained by `&&` or `||` – Poul Kruijt May 12 '20 at 08:40
I have added a java or c# code snippet of what I am trying to do - From everything I have looked at in the docs and other postings, it appears like Angular does not support what I am specifically looking for, so I will have to find a work around. The thing is I have to chain my expression with && or || and I don't have a condition to place there, I want more than more expression to get executed when if or else condition is met. – WhatsInAName May 13 '20 at 16:43
You have typescript(TS) for it. Use lifecycle hooks to trigger TS code and chain as many expressions you want. In Angular, HTML is the structure styled by CSS and driven by TS :) – T. Sunil Rao May 13 '20 at 19:48

T. Sunil Rao · Answer 2 · 2020-05-13T16:09:10.800

Thank you, i did look at that but doesn't fulfill my requirement. I didnt think I would get stuck at something as simple as this but here I am. Isnt there any way I can have more than one statement when a if condition evaluates to true or false?

I presume you're looking for ngSwitch

Refer https://angular.io/api/common/NgSwitch

Update:

After deep thought, I hope, I am finally able to figure out what you are asking for...

<ng-container *ngIf="col !='actions'; else multilpleActions">
  ...
</ng-container>

<ng-template #multilpleActions>
  <ng-container *ngTemplateOutlet="showAction"></ng-container>
  <ng-container *ngTemplateOutlet="anotherAction"></ng-container>
</ng-template>

<ng-template #showAction>
  ...
</ng-template>

<ng-template #anotherAction>
  ...
</ng-template>

I really hope this helps.

UPDATE (After your edit)

Let me point out, *ngIf does not work on statements of code which work sequentially, but on HTML templates which are just text. *ngIf does a boolean operation on a single element and lets you select from 2 templates which one to be rendered into it. At any given time you can only render one template to one element. So what you are asking for is impossible. If you need to render more than one template to one element, only way out is to have them as children of a parent and render the parent to the element.

Happy Coding!

Thanks @T. Sunil Rao - this comes close but for this to work I will have to group together my statements within if or else statements and my use case is slightly different but I might have to resort to this approach if I dont find a alternative. — WhatsInAName, May 13 '20 at 14:43
Yes I agree with your update and probably look at a workaround to go about this. — WhatsInAName, May 13 '20 at 16:47

score 0 · Answer 3 · answered May 11 '20 at 20:46

0

As per the best practices, there should not be more logic on the templates. As it may cause hard to track bugs and un-tested scenarios.

Move these logics in your component. And create multiple flags and then try to show/hide the exact segment.

answered May 11 '20 at 20:46

Abhinesh Gour

61
4

You might be right because I couldn't find a solution so far. I do know how complicated it can be to debug a if condition to make that a best practice but I will have to live with that now, thank you – WhatsInAName May 12 '20 at 02:23

score 0 · Answer 4 · answered May 12 '20 at 10:26

0

The best way to handle multiple conditions like this inside a template is by using ngSwitch, check Angular documentation https://angular.io/api/common/NgSwitch

answered May 12 '20 at 10:26

Shilpa Lalwani

41
2

I am not trying to have multiple if else conditions - I am trying to to have multiple statements within an if or else condition. – WhatsInAName May 13 '20 at 14:45

Angular ngIf with multiple statements in else

4 Answers4