*Ngif Else If in Template

*ngIf else if in template

Another alternative is to nest conditions

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

How can I use *ngIf else?

Angular 4 and 5:

Using else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

You can also use then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

Or then alone:

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

Demo:

Plunker

Details:

<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN:

The HTML <template> element is a mechanism for holding client-side
content that is not to be rendered when a page is loaded but may
subsequently be instantiated during runtime using JavaScript.

ngIf else if in Angular

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>

How to make a if-else Angular template with only ng-container?

The code for the ngIf directive expects to be passed a reference to a template (TemplateRef) for the else branch, which it will call createEmbeddedView on to display the nested content. Therefore, it makes no sense to try to use any other kind of element for the else content - it just won't work. You're able to nest an ng-container inside the ng-template if needs be, though.

This might seem unintuitive, but bear in mind that structural directives (i.e. ones that you call with a *) are always represented as ng-template under the hood, no matter what kind of element they're attached to - these two pieces of code are the same:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    ...
</ng-container>
<ng-template #newDeb>
    ...
</ng-template>

---

<ng-template [ngIf]="contributeur.deb; else newDeb">
    <ng-container>
        ...
    </ng-container>
</ng-template>
<ng-template #newDeb>
    ...
</ng-template>

NgIf-Else condition does not work properly

You are using the ngIfThen syntax which requires trueCondition to be a template as well.

See the Angular NgIf documentation.

<ng-container *ngIf="employed == 'employed'; then trueCondition else elseTemplate"></ng-container>
<ng-template #trueCondition>
    <!-- Content if true -->
</ng-template>
<ng-template #elseTemplate>
    <!-- Content if false -->
</ng-template>

What I think you want is the ngIf syntax, which is *ngIf="employed == 'employed'; else elseTemplate.

<ng-container *ngIf="employed == 'employed'; else elseTemplate">
    <!-- Content if true -->
</ng-container>
<ng-template #elseTemplate>
    <!-- Content if false -->
</ng-template>

Also, be careful to not confuse your ngModel named employed with its actual value that can be a string with the value employed.

The ngModel named employed will always be "truthy", so make sure to check employed == 'employed'.

How do I use the *ngIf then else with relational operators?

You need to put your ngIf as a string, some some tags around and remove the string interpolation:

    <div *ngIf=" returnedTotalResults > 0; else no_data_found">
        <pagination></pagination>
    </div>
    <ng-template #no_data_found>
        <p>No results found</p>
    </ng-template>

https://angular.io/api/common/NgIf

---

Related Topics