ngIf else if in Angular

Question

I would show message depending on a 2 values

<div *ngIf="nolimit; else limited">
   <p class="isGroup">No limit message</p>
</div>
<div *ngIf="noDelegation; else limited">
   <p class="isGroup">No delegation</p>
</div>
<ng-template #limited>
  Content here
</ng-template>

I would that either isGroup message shows or no delegation if they are both false I should show content #limited

My actual problem is that I get no limit message and #limited content together when nolimit is true:

no limit

Content Here

But When I delete no delegation code, evetything is working.

Answer 1

I think it has to do with the microsintax:

<div [ngIf]="nolimit" [ngIfElse]="limited">
  <p class="isGroup">No limit message</p>
</div>

<div [ngIf]="noDelegation" [ngIfElse]="limited">
  <p class="isGroup">No delegation</p>
</div>

<ng-template #limited>
 Content here
</ng-template>

Answer 2

It would be better to use three divs and then use *ngIf="!nolimit && !noDelegation" on the last one that will show Content here text

<div>
  <div *ngIf="nolimit">
    <p class="isGroup">No limit message</p>
  </div>
  <div *ngIf="noDelegation">
    <p class="isGroup">No delegation</p>
  </div>
</div>

<div *ngIf="!nolimit && !noDelegation">
  Content here
</div>