How to check empty object in angular 2 template using ngIf

Question

I want to check if my object is empty dont render my element  and this is my code    lt div class  comeBack up   ngIf  previous info        gt      lt a         routerLink     Inside group page    name  previous info path   dotTodash            gt            previous info title       lt  a gt   lt  div gt    but my code is wrong  what is the best way to do this

User · Answer

This worked for me   Check the length property and use   to avoid undefined errors   So your example would be    lt div class  comeBack up   ngIf  previous info  length  gt    UPDATE  The length property only exists on arrays  Since the question was about objects  use Object getOwnPropertyNames obj  to get an array of properties from the object  The example becomes    lt div class  comeBack up   ngIf  previous info   amp  amp  Object getOwnPropertyNames previous info  length  gt  0  gt    The previous info   amp  amp  is added to check if the object exists  If it evaluates to true the next statement checks if the object has at least on proporty  It does not check whether the property has a value

User · Answer

This should do what you want    lt div class  comeBack up   ngIf   previous info   json           json   gt    or shorter   lt div class  comeBack up   ngIf   previous info   json           gt    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

User · Answer

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  39 t check if   object field   exists

User · Answer

Just for readability created library ngx-if-empty-or-has-items it will check if an object  set  map or array is not empty  Maybe it will help somebody  It has the same functionality as ngIf  then  else and  as  syntax is supported    arrayOrObjWithData     1       id  1    lt h1  ngxIfNotEmpty  arrayOrObjWithData  gt    You will see it  lt  h1 gt    or      store the result of async pipe in variable   lt h1  ngxIfNotEmpty  arrayOrObjWithData    async as obj  gt      obj id    lt  h1 gt    or  noData             lt h1  ngxIfHasItems  noData  gt     You will NOT see it  lt  h1 gt

User · Answer

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  amp  amp   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    lt div   ngIf   previous info   keyvalue   length  gt       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

User · Answer

A bit of a lengthier way  if interested in it    In your typescript code do this   this objectLength   Object keys this previous info  length    0    And in the template   ngIf  objectLength    0

User · Answer

You could also use something like that    lt div class  comeBack up   ngIf  isEmptyObject previous info     gt    with the isEmptyObject method defined in your component   isEmptyObject obj      return  obj  amp  amp   Object keys obj  length     0

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

Examples related to javascript

Examples related to typescript

Examples related to angular