angular2 - show hide if value is empty

Question

Here I have two container, first container suppose to be show if value is exist in json and second one show is value is empty from json. Here is my code:

App.component.html

<!-- show this container if value is exist -->
    <ng-container *ngIf="outletName">
  <div class="media media-xs align-items-center mb-5">
    <div class="media-right float-right">
      <a class="drop-assigned-outlet" href="#"><i class="fa fa-trash-o"></i></a>
    </div>
    <button class="btn btn-primary-ln" *ngIf="outletName">Change assigned outlet</button>x
  </div>
</ng-container>

<!-- show this container if value is empty -->
<ng-container *ngIf="outletName == ''">
  <div class="media media-xs align-items-center mb-5">
    <p>No outlet have assigned</p>
  </div>
  <button class="btn btn-primary-ln">Assign an outlet</button>
</ng-container>

data.json

[
  {
    "staffId": "59998eeadfb23a8c0bba5769",
    "staffName": "Sutton Fitzpatrick",
    "outletName": "Marjorie Fitzgerald",
    "outletId": "59998eeaf84372166a233235",
    "outletLocation": "mid valley, kl",
    "designation": "Outlet Supervisor",
    "image": "http://placehold.it/100x100",
    "activeSince": "2015-06-27T09:29:23 -08:00",
    "deactivatedSince": "2015-12-07T12:05:04 -08:00",
    "status": "active",
    "email": "[email protected]",
    "contact": 60124174701,
    "devices": [
      {
        "posName": "Outlet1_DEVICE00001",
        "deviceId": "59998eea245ec74623bfb06c",
        "lastActive": "04:50:34"
      }
    ]
  }
]

app.component.ts

ngOnInit() {

    let staffDetail = localStorage.getItem('editStaff');
    let staff = JSON.parse(staffDetail);

    this.outletName = staff.dataItem.outletName;
    this.outletLocation = staff.dataItem.outletLocation;
    this.image = staff.dataItem.image;
}

What is the actual behavior? What is the expected behavior? Is outletName actually an empty string ('') when doesn't exist, or is it undefined or null? — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 20, 2017 at 16:45
@GünterZöchbauer Yes outletName is empty string if no value. There are two ng-container in template and first ng-container suppose to be show if outletName: 'something' and second one show if outletName: '' — SKL
– SKL, Commented Aug 20, 2017 at 16:51
Please add the .ts file of the component, especially the part where you assign the values from the json to the properties of the component. — Hendrik Brummermann
– Hendrik Brummermann, Commented Aug 20, 2017 at 16:52
@GünterZöchbauer your previous answer is already worked prefectly to me but you deleted. I've updated my .ts as well — SKL
– SKL, Commented Aug 20, 2017 at 17:01
Interesting. This has to be some Angular-specific behavior, because in plain JS '' is falsey, but glad to hear that it works for you anyway. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 20, 2017 at 17:02

Günter Zöchbauer · Accepted Answer · 2017-08-20 16:52:47Z

5

Change the first to

<ng-container *ngIf="outletName !== ''">

answered Aug 20, 2017 at 16:52

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SKL Over a year ago

Thanks @Günter Zöchbauer

Vega · Accepted Answer · 2017-08-21 12:20:25Z

Here you have 'perfect' occasion to use ng-templates:

 <div *ngIf="outletName; else templateForEmpty">
          <div class="media media-xs align-items-center mb-5">
              <div class="media-right float-right">
                 <a class="drop-assigned-outlet" href="#"><i class="fa fa-trash-o"></i></a>
              </div>
             <button class="btn btn-primary-ln" *ngIf="outletName">Change assigned outlet</button>x
           </div>
           <ng-template #templateForEmpty>
              <div class="media media-xs align-items-center mb-5">
                 <p>No outlet have assigned</p>
              </div>
              <button class="btn btn-primary-ln">Assign an outlet</button>
           </ng-template>
   </div>

Collectives™ on Stack Overflow

angular2 - show hide if value is empty

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related