'ngIf ' on negative statement not working properly

Question

Good day,

I have an issue when trying to use the ngIF in Angular, specifically, when the values has to be negative...

for example

I have this HTML code

<ul class="nav navbar-nav" *ngIf ="identity">
    <li>
      <a href="#">
        <span class="glyphicon glyphicon-home"></span>
        Inicio
      </a>
    </li>

    <li>
      <a href="#">
        <span class="glyphicon glyphicon-th-list"></span>
        Timeline
      </a>
    </li>

    <li>
      <a href="#">
        <span class="glyphicon glyphicon-user"></span>
        User
      </a>
    </li>

  </ul>

Where "identity" stores the user data and a token when logged in and it works fine as screenshot below

however, when I use the ngIf = "!identity" in the next div so different icons will display at the top right corner when no user has logged in, nothing happens

<ul class="nav navbar-nav navbar-right" *ngIf ="!identity">
    <li>
      <a [routerLink]="['/login']" [routerLinkActive]="['active']">
        <span class="glyphicon glyphicon-log-in"></span>
        Login
      </a>
    </li>

    <li>
      <a [routerLink]="['/register']" [routerLinkActive]="['active']">
        <span class="glyphicon glyphicon-user"></span>
        Register
      </a>
    </li>

   </ul>

As you can see here, no user data nor token has been generated but still the icons at the top right corner aren't showing up

I'd already tried to use the ngIf else statement using the <ng-template #anExample> and adding the second div in it and add it to the *ngIf ="identity; else anExample" but still it doesn't work.

Thanks in advance for the help

@AlirezaAhmadi shoot!!! I forgot to include it in my question: here is the function getIdentity(){ let identity = JSON.parse(localStorage.getItem('identity')||'{}'); if(identity != "undefined"){ this.identity = identity; }else{ this.identity= null; } return this.identity; } — SecaidaDevStudent, Jun 20 '21 at 21:18
Low rep so I have to add answer instead of a comment but definitely checked that you are getting faked out by something. Take off the ngIf and make sure it displays (css / formatting issue), if it is in the dev tools elements but not showing you know it is something else. — Wild Bill, Jun 20 '21 at 22:14
Hi @Wild Bill well...funny thing.. when I use this *ngIf ="!identity == false" it shows both left and right icons so I'm struggling with the logic here because if the false statement denies the non existence of a value in identity, this means that identity should contain something right? I'd tried in incognito in both firefox and chrome and the issue continues — SecaidaDevStudent, Jun 20 '21 at 22:33
You are returning/parsing '{}' and it should be an empty object in these cases so here are some checks for that: https://stackoverflow.com/questions/37111005/how-to-check-empty-object-in-angular-2-template-using-ngif — Wild Bill, Jun 20 '21 at 22:49
truthy/falsy link, see specifically {} is truthy: https://www.sitepoint.com/javascript-truthy-falsy/ — Wild Bill, Jun 20 '21 at 23:19

Alireza Ahmadi · Answer 1 · 2021-06-21T15:40:40.277

1

As you see in the second picture we still see the Inicio , Timeline and User which means identity has value because you assign it to {}.

The identity variable never be undefined because of {}. In other words if identity does not exists in localStorege you assign it with empty object. This is your function and else part never executed.

function getIdentity() {
    let temp  = localStorage.getItem('identity');
    let identity = temp != null ? JSON.parse(temp) : null;
    
    if (identity != null) 
        this.identity = identity; //always this executed
    else 
        this.identity = null;//never executed
    return this.identity;
}

You have to change JSON.parse(localStorage.getItem('identity')||'{}'); to JSON.parse(localStorage.getItem('identity'));.

edited Jun 21 '21 at 15:40

answered Jun 21 '21 at 03:22

Alireza Ahmadi

8,579
5
15
42

Thanks @Alireza Ahmadi I was thinking the same but if I remove the brackets and try to compile the code I have this message ` Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. 38 let identity = JSON.parse(localStorage.getItem('identity'));` I tried to declare 'identity: String;' and initialize it in the constructor as 'this.identity = 'String';' but still it give me the same error. Thanks for your help – SecaidaDevStudent Jun 21 '21 at 15:09
Hi Alireza, I think I figured out, I'll post it answering my own question – SecaidaDevStudent Jun 21 '21 at 15:38
@secaidadevstudent I edit my code. Please check that – Alireza Ahmadi Jun 21 '21 at 15:41

score 0 · Answer 2 · answered Jun 21 '21 at 15:42

0

I think I found a solution here, after searching for a solution, I found that this is a TS bug mentioned here False error "Type 'null' is not assignable" for Typescript code #1818 so basically we need to change the tsconfig.json and include under the "compilerOptions" the following

"strictNullChecks": false,

And that's it, now it's working fine...thank you all for the help

answered Jun 21 '21 at 15:42

SecaidaDevStudent

95
1
10

1

No man that is not good way. You don't need disable checking null – Alireza Ahmadi Jun 21 '21 at 15:43
1

please check [this](https://www.tsmean.com/articles/learn-typescript/strict-null-checks-best-practice/) to understand drawbacks of `"strictNullChecks": false` – Alireza Ahmadi Jun 21 '21 at 15:47
1

Thanks bro...so I change it to `true` and my code still works fine so, based on your knowledge..what could the the downside of setting this as false? – SecaidaDevStudent Jun 21 '21 at 16:00
1

you'll get more safety on compile time and avoid some problem that can occur in your app – Alireza Ahmadi Jun 21 '21 at 16:04
1

Thanks man for the help...I'm still learning so if I encounter other issue I'll post it so maybe I can get your help Cheers! – SecaidaDevStudent Jun 21 '21 at 16:24
1

Yes...it works like a charm right now...when no one is logged in, the correct icons display in the correct position and once I log in (and refresh the browser), the "Inicio", "Timeline" and "User" icons appear.. you have no idea how frustrated I was but you know.. beginners mistakes but your suggestion of removing the "{}" from `JSONparse()` helped me to understand the logic here. Thanks! – SecaidaDevStudent Jun 21 '21 at 16:37

'ngIf ' on negative statement not working properly

2 Answers2