Angular ng-show Still Shows <div> Element When Empty

Question

How can I hide/remove the containing <div> element when the value is empty:

<div class="small" ng-show="ID !== ''">{{ info.ID }} | </div>

Renders:

<div class="small">|</div>

Can I remove the <div> completely if empty? I've tried:

<div class="small" ng-show="!ID">{{ info.ID }}</div >

Answer 1

You are checking value of ID property which is not the ID within info object so use info.ID within the ng-show.

<div class="small" ng-show="info.ID">{{ info.ID }} | </div>
<!-- -----------------------^^^^^^^----------------------->

---

If you don't want to render the element itself then use ng-if directive since ng-show directive simply hide using some CSS.

<div class="small" ng-if="info.ID">{{ info.ID }} | </div>
<!-- ---------------------^^^^^^^----------------------->

Answer 2

If you only want to hide the element then use:

<div class="small" [hidden]="info?.ID">{{ info?.ID }}</div>

If you alse want to avoid rendering it (which is better in most cases) then use:

<div class="small" *ngIf="info?.ID">{{ info?.ID }}</div>

Use the Elvis operator otherwise you may get this mistake:

Can't get ID of null