how to use negative ngIf?

Question

Im trying to show a div if "avenant" does not exist but its not working !

*ngIf="avenant" is working it shows the avenants if they exist, but *ngIf="!avenant" doesn't show the message in the div !

  <ng-container *ngFor="let avenant of Avenants" >
      <ng-container  *ngIf="avenant">

      <div class="panel-body border border-purple rounded stl2">
        <table class="table table-hover">
          <thead class="thead-light" >
            <tr>
              <th>id</th>
             <th> Actions</th>
            </tr>
          </thead> 
          <tbody>
            <tr  *ngFor="let avenant of Avenants | orderBy: 'id' ">
              <td>{{avenant.id}}</td>
              <td>
                <button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)> </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
     </ng-container>
    <ng-container *ngIf="!avenant">
      <div>
       no avenant found !
      </div>
    </ng-container>
   </ng-container>

Why not use `else`, see e.g. https://angular.io/api/common/NgIf — jonrsharpe, Jun 19 '20 at 15:49
@LamyaeLac if its an instance of an object it will never be undefined which is why the !avenant doesnt work. If your array is an array of avenant and doesnt allow undefined, it will never work like that. The better way to do what you are trying to do is using the else but it doesnt help you understand anything here. If avenant is an object, the only way a negative statement can work is if the object === undefined or null. {} is not going to work. — ukn, Jun 19 '20 at 16:00
Hope this helps you, this might resolve your query [link](https://stackoverflow.com/questions/37111005/how-to-check-empty-object-in-angular-2-template-using-ngif) — Suraj Gupta, Jun 19 '20 at 16:01
@LamyaeLac provide us the Avenants array as a json. The solution is super simple but since we dont know what your data look like its hard to give you the right answer. — ukn, Jun 19 '20 at 17:13

Reynier Rivero · Answer 1 · 2021-09-23T13:26:41.110

0

Rewrite your code

<ng-container *ngFor="let avenant of Avenants" >
  <ng-container  *ngIf="avenant; else noAvenant">

  <div class="panel-body border border-purple rounded stl2">
    <table class="table table-hover">
      <thead class="thead-light" >
        <tr>
          <th>id</th>
         <th> Actions</th>
        </tr>
      </thead> 
      <tbody>
        <tr  *ngFor="let avenant of Avenants | orderBy: 'id' ">
          <td>{{avenant.id}}</td>
          <td>
            <button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)"> </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
 </ng-container>
<ng-template #noAvenant>
  <div>
   no avenant found !
  </div>
</ng-template>
</ng-container>

Using if-else directive

edited Sep 23 '21 at 13:26

answered Jun 19 '20 at 15:51

Reynier Rivero

2,042
2
8
12

@LamyaeLac it's the named `ng-template` further down, see the link I shared above. – jonrsharpe Jun 19 '20 at 16:01
it didn't work maybe because avenant is not a boolean – Lamyae Lac Jun 19 '20 at 16:17
1

Missing a double quote on `` (**"deleteAvenantId(avenant.id)"**) – Juanjo Martinez Sep 23 '21 at 11:45

score 0 · Answer 2 · answered Jun 19 '20 at 17:29

You can do the following to your ngIf (if you have to check for objects) :

*ngIf="(avenant | json) != '{}'"

<ng-container *ngFor="let avenant of Avenants" >
   <ng-container *ngIf="(avenant | json) != '{}'"> //you could do like this

      <div class="panel-body border border-purple rounded stl2">
        <table class="table table-hover">
          <thead class="thead-light" >
            <tr>
              <th>id</th>
             <th> Actions</th>
            </tr>
          </thead> 
          <tbody>
            <tr  *ngFor="let avenant of Avenants | orderBy: 'id' ">
              <td>{{avenant.id}}</td>
              <td>
                <button class="btn btn-danger" type="button" (click)="deleteAvenantId(avenant.id)> </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
     </ng-container>
    <ng-container *ngIf="!avenant">
      <div>
       no avenant found !
      </div>
    </ng-container>
   </ng-container>

Hope this helps you!!

score 0 · Answer 3 · answered Jun 19 '20 at 17:35

0

This worked :

 <ng-container *ngIf="(Avenants) == ''">
      <div>
        Pas d'avenants crées !
      </div>

answered Jun 19 '20 at 17:35

Lamyae Lac

43
11

This doesnt make any sense, an array will never equal an empty string – ukn Jun 19 '20 at 18:00

how to use negative ngIf?

3 Answers3