CODEWITHSUNDEEP
angularjsng-show
user3773297
user3773297

Reputation: 31

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

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 >

Upvotes: 1

Views: 1112

Answers (2)

Udi Mazor
Udi Mazor

Reputation: 1826

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

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115202

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>
<!-- ---------------------^^^^^^^----------------------->

Upvotes: 2

Related Questions