• 131
• 255
• 14

How to not display empty data in an Angular UI app with *ngIf

by bernt & torsten

I had this use case when I read data from a Firestore collection, some fields were empty, when the data was going to the UI I did not want to display the empty fields.

This post will show you how I did that with a code snippet, this is not going to be a very long post. I used Angular *ngIf to control what to display as seen below. Some of the data were links they started with <a and other data fields were with the <div.

    <table class="table table-bordered table-hover" id="table-ext-1">
      <tbody>
        <tr class="text-center" *ngFor="let shopdata of shopsdetailsdata; let i = index" [attr.data-index]="i">
          <td class="text-center"><img src="{{shopdata.searchdata.item_image_url}}" alt=""><br><br>{{shopdata.searchdata.item_image_title}}</td>
          <td class="text-center">{{shopdata.searchdata.note}}</td>
          <td><a href="{{shopdata.searchdata.item_url}}" target="_blank">Product details</a><br><br>
            <div *ngIf="shopdata.searchdata.location"> {{shopdata.searchdata.location}}</div>
            <div *ngIf="shopdata.searchdata.shop"> Marketplace: {{shopdata.searchdata.shop}}</div>
            <div *ngIf="shopdata.searchdata.seller"> Seller: {{shopdata.searchdata.seller}}</div>
            <a *ngIf="shopdata.searchdata.store_url" href="{{shopdata.searchdata.store_url}}" target="_blank">Visit Seller Store</a><br><br>
            <a *ngIf="shopdata.searchdata.contact_seller" href="{{shopdata.searchdata.contact_seller}}" target="_blank">Contact Seller</a><br><br>
            <a *ngIf="shopdata.searchdata.site" href="{{shopdata.searchdata.site}}" target="_blank">{{shopdata.searchdata.shopl}} - {{shopdata.searchdata.sitel}}</a><br><br>
          </td>
          <td class="text-center">
          <button class="btn btn-sm btn-info" type="button" (click)="updateshopdetails(shopdata)">
            <em class="fa fa-pencil-square-o"></em>
          </button>
        </td>
        <td class="text-center">
          <button class="btn btn-sm btn-danger" type="button" (click)="deleteshopdetails(shopdata)">
            <em class="fa fa-trash"></em>
          </button>
        </td>
      </tr>
      </tbody>
    </table>

Using the *ngIf you can control to show a data element or not, to learn more about *ngIf here is a great article on how to use *ngIf.

That is it

I hope this helps if you have questions when you look at the code snippet and if it’s not clear please get in contact and I will help you out by filling in the comment below.