
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.

Tech Disillusionment
For four decades, I have worked in the tech industry. I started in the 1980s when computing...

A Poem: The Consultant's Message
On a Friday, cold and gray,
The message came, sharp as steel,
Not from those we...

Using AI to Plan Wall Repair and Gutter Installation
In this article, I will share my experience using AI to plan the work required to fix a wall...