CODEWITHSUNDEEP
angular
user2837961
user2837961

Reputation: 1555

Angular hide parent div when no items in the child

This is my html

<div class="d-flex justify-content-around flex-wrap">
    <div *ngFor="let f of files$ | async" class="card m-2 card-size">
    </div>
</div>

When there are no items in the files$ observable, I see a small border of the parent. I have tried border-0 etc but no effect. Is it possible to hide the parent div when the child div has no items?

Upvotes: 0

Views: 305

Answers (1)

Emilien
Emilien

Reputation: 2761

Not the best solution but you can try like this :

<ng-container *ngIf="files$ | async as files">
  <ng-container *ngIf="files.length > 0">
    <div class="d-flex justify-content-around flex-wrap">
      <div *ngFor="let f of files" class="card m-2 card-size">
      </div>
    </div>
  </ng-container>
</ng-container>

EDIT

Thanks @PVermeer ! Effectively, you can place the second *ngIf into the container div.

<ng-container *ngIf="files$ | async as files">
  <div class="d-flex justify-content-around flex-wrap" *ngIf="files.length > 0">
    <div *ngFor="let f of files" class="card m-2 card-size">
    </div>
  </div>
</ng-container>

Upvotes: 2

Related Questions