ngIf not updating DOM

Question

I have a variable isLTEavailable in my ts file inside a function. When the function is called, based on the a condition, isLTEavailable's value changes and is logged correctly, but for some reason, it is not being updated in the DOM.

Here's my ngif condition:

<li class="nav-item dropdown" *ngIf="isLTEavailable">

Here's my ts function:

console.log("Lte --", lte_id)

if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = true;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
} else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = false;
    console.log("isLTEavailable -----> ", this.isLTEavailable)    
}

I printed the variable using string interpolation as well and it always shows true as its value even though console updates correctly.

P.S. isLTEavailable is initialized as true.

can you provide working demo, i need to see your condition and where are you calling the function — varundhariyal, Dec 19 '19 at 07:24
Just display the value using interpolation i.e. `{{isLTEavailable}}` above the list item and make sure the value is getting changed. — MonkeyScript, Dec 19 '19 at 07:29
@Arcteezy As mentioned, I did dispay using interpolation but it is not being updated. It is being logged correctly though. — Ujjwal Sharma, Dec 19 '19 at 07:32
Yes, but are you doing it in a lifecycle hook or a custom function? — manneJan89, Dec 19 '19 at 07:34
you need to provide outlook to us to understand your code logic — varundhariyal, Dec 19 '19 at 07:44
I think `lte_id` is not set, thus isLTEavailable is false, thus its not shown... — Timothy, Dec 19 '19 at 07:58
are you sure that you have bound the scope of the function to your context? Usually, creating an arrow function solves that. Can you show us how your function signature looks like, and how you invoke it? — John, Dec 19 '19 at 08:08

score 4 · Answer 1 · answered Dec 19 '19 at 08:10

4

According to this

Change detection fails on change in a variable inside a callback or subscribe method. One could use

 ngZone.run(() => { this.isLTEavailable = false })

to update the value. (or) trigger the change detection manually by following

import {ChangeDetectorRef} from '@angular/core'
constructor(private ref: ChangeDetectorRef){}


//after variable update
this.ref.detectChanges();

Let me know if this works. Thanks

answered Dec 19 '19 at 08:10

Mukundhan

3,284
23
36

No changes. detectChanges() returns undefined – Ujjwal Sharma Dec 19 '19 at 08:16
have you tried logging it out after the detectChanges() called ? – Mukundhan Dec 19 '19 at 08:19
yes i did. the function returns undefined and the variable's value changes properly – Ujjwal Sharma Dec 19 '19 at 08:26
could you create a stackBlitz https://stackblitz.com just with the skeleton ?? – Mukundhan Dec 19 '19 at 08:33

Wisely D Cruizer · Answer 2 · 2019-12-19T08:06:18.447

1

Make Use of Angular's Observable

In your TS file :

Declare :

  import { Observable } from 'rxjs';
  isLTEavailable : Observable<boolean> ; 

  //and in your function
  console.log("Lte --", lte_id)

  if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = new Observable(observer=>observer.next(true));
  } else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = new Observable(observer=>observer.next(false));
  }

Then in your HTML Use the ASYNC pipe :

 <li class="nav-item dropdown" *ngIf="isLTEavailable | async">

Here is the working example i have put together for you to look at :

https://stackblitz.com/edit/angular-v4dvx6

edited Dec 19 '19 at 08:06

answered Dec 19 '19 at 07:39

Wisely D Cruizer

916
9
23

That's always setting it to false for some reason even though going inside the if condition and not else – Ujjwal Sharma Dec 19 '19 at 07:46
The answer i posted is an working example. i post the stackblitz for the same – Wisely D Cruizer Dec 19 '19 at 07:53
Wasn't me @Wisely. My reputation is too low for my vote to account for a change anyway. – Ujjwal Sharma Dec 19 '19 at 07:55
Ok, Ill try to put a working example for you, make sure your code is put together right. – Wisely D Cruizer Dec 19 '19 at 07:59
Can you take a look at the example i posted? – Wisely D Cruizer Dec 19 '19 at 08:06
@UjjwalSharma Is it working? don't look at _scalar values in the log. I've updated the code for the console.logs. – Wisely D Cruizer Dec 19 '19 at 08:41
Unfortunately, no. Seems to me this is an issue beyond the scope of this question. It might be due to some other mistake I made elsewhere. I'll debug and let you know. What I'm stumped about is why the interpolation is not working since it is one way data binding and should work. – Ujjwal Sharma Dec 19 '19 at 09:54
Yes the issue seems to lie else where – Wisely D Cruizer Dec 19 '19 at 09:56

score 1 · Answer 3 · answered Dec 20 '19 at 09:38

Thanks all for having a healthy discussion here. I found the issue with my code and fixed it and now the interpolation works as expected. The issue was the initialisation of isLTEavailable variable inside the ngOnInit which resulted it in being updated back to the original state whenever the function was called. Again, thanks for helping me out. I got to learn about the changeDetection function and learned about using Observables as an alternative from your answers. Thank you. Really appreciate it.

score 0 · Answer 4 · answered Dec 19 '19 at 08:06

Maybe you can use ChangeDetectorRef https://angular.io/api/core/ChangeDetectorRef like this this._changeDetectorRef.detectChanges(),

constructor(private _changeDetectorRef: ChangeDetectorRef) {

}

//IN YOUR FUNCTION
if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = true;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
    this._changeDetectorRef.detectChanges()

} else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = false;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
    this._changeDetectorRef.detectChanges()   
}

Can you make an example of the problem at stackblitz? @UjjwalSharma — Muhammet Can TONBUL, Dec 19 '19 at 09:08

ngIf not updating DOM

4 Answers4