![Image](https://storage.googleapis.com/stateless-torbjorn-zetterlund/sites/8/2020/04/0b2e7b4f-cloud-water-coastal-sailing-norway-20180627_071823.jpg)
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.
![Image](https://storage.googleapis.com/stateless-torbjorn-zetterlund/sites/8/2024/06/20240604-102648.png)
The AI boom – a ticking energy bomb
Yes, the rise of artificial intelligence indeed presents a conundrum, not unlike the many...
![Image](https://storage.googleapis.com/stateless-torbjorn-zetterlund/sites/8/2023/11/totta7219_this_is_about_In_the_realm_of_creative_endeavour.png)
Three Ideas To Keep Your Construction Business Running Smoothly
If your construction business is currently struggling, then you need to work out how to get...
![Image](https://storage.googleapis.com/stateless-torbjorn-zetterlund/sites/8/2024/01/20240116-085856.png)
Business vs. GPTs: Navigating the Challenges of Personalized AI
The recent proclamation by OpenAI has caught the attention of $20 ChatGPT Plus subscribers,...