Advertisements

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

Cloud water coastal sailing Norway
Cloud water coastal sailing Norway

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.

Advertisements

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

Subscribe for updates

Enter your email address to subscribe to receive notifications of new content by email.

Join 5,720 other subscribers

Advertisements