How to check empty object in angular 2 template using *ngIf

Question

This should do what you want:

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

or shorter

<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">

Each {} creates a new instance and ==== comparison of different objects instances always results in false. When they are convert to strings === results to true

Plunker example

From the above answeres, following did not work or less preferable:

• (previous_info | json) != '{}' works only for {} empty case, not for null or undefined case
• Object.getOwnPropertyNames(previous_info).length also did not work, as Object is not accessible in the template
• I would not like to create a dedicated variable this.objectLength = Object.keys(this.previous_info).length !=0;

• I would not like to create a dedicated function

  isEmptyObject(obj) {
     return (obj && (Object.keys(obj).length === 0));
  }
  

---

Solution: keyvalue pipe along with ?. (safe navigation operator); and it seems simple.

It works well when previous_info = null or previous_info = undefined or previous_info = {} and treats as falsy value.

<div  *ngIf="(previous_info | keyvalue)?.length">

keyvalue - Transforms Object or Map into an array of key value pairs.

?. - The Angular safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined

DEMO: demo with angular 9, though it works for previous versions as well

You could also use something like that:

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

with the isEmptyObject method defined in your component:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}

Above answers are okay. But I have found a really nice option to use following in the view:

{{previous_info?.title}}

probably duplicated question Angular2 - error if don't check if {{object.field}} exists