0

I'm encountering a weird issue, where I have a click event, updates a value, I see it updating in the console but the HTML doesn't change.

TS

toggleTooltip = false;

displayTooltipMessage(flag: boolean) {
    console.log(flag); // Value passed
    this.toggleTooltip = flag;
    console.log(this.toggleTooltip); // updated value
}

HTML

 <button (click)="displayTooltipMessage(true)">Press me</button>

 {{toggleTooltip}}

I don't see any error in the console nor the server

  • I close/open my browser, clear the cache, restart server, clear IDE, etc doesn't helped

UPDATE:

<div class="table-responsive">
      <app-button></app-button> /* WORKING HERE */
      <div
        *ngFor="let obj of ListOfObj"
        class="lookup-cards"
      >
        <ng-container *ngFor="let col oftTableColumns">
      <app-button></app-button> /* NOT WORKING HERE */
        {{ obj[col.field] }}
      </ng-container>
      </div>
</div>
Ashish Sharma
  • 83
  • 1
  • 2
Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
  • 1
    you always pass ```true``` so this.toggleTooltip always becomes ```true``` , but at first time it should change from false to true. – Fateme Fazli Jan 25 '19 at 19:20
  • correct. But nor even the first time changes @FatemeFazli – Patricio Vargas Jan 25 '19 at 19:20
  • 1
    I just tried this code in a stackblitz and it's working for me: https://stackblitz.com/edit/angular-zhsqqd It changes from false to true on the display. – DeborahK Jan 25 '19 at 19:20
  • 1
    Works for me in stackblitz, maybe there is something wrong with the rest of your setup. https://stackblitz.com/edit/angular-dfyk77 – Jelle Jan 25 '19 at 19:21
  • 1
    it's weird maybe the problem is from somewhere else. – Fateme Fazli Jan 25 '19 at 19:21
  • Thanks everyone. I'm so confused. I know it's a very basic question. it's just weird that it doesn't work. I will do more research on my environment – Patricio Vargas Jan 25 '19 at 19:24
  • 1
    If you initialize `toggleTooltip = true`, do you see it in the HTML output? If not, try removing the button (or anything else until you find the cause of the problem). – ConnorsFan Jan 25 '19 at 20:39
  • @ConnorsFan I have updated my question. I have tracked it down. Seem like an issue with the ng-container – Patricio Vargas Jan 25 '19 at 21:00
  • @DeborahK I have updated my question. After trying to track down the issue – Patricio Vargas Jan 25 '19 at 21:00
  • What is the `` tag doing inside of the other one? Also: where is `toggleTooltip` defined? In the `app-button` component or in the parent component? – ConnorsFan Jan 25 '19 at 21:02
  • Could you click the link for the stackblitz I posted and update it to demonstrate your issue? I don't quite see how the updated code matches with the originally posted code. – DeborahK Jan 25 '19 at 21:04
  • 1
    @DeborahK, updated code is our parent component and is the actual component with "Press Me" button. – Ashish Sharma Jan 25 '19 at 21:07
  • @ConnorsFan the `toggleTooltip` is inside of the `app-button` component – Patricio Vargas Jan 25 '19 at 21:20
  • I just updated the stackblitz to add the code as described and it still works fine for me: https://stackblitz.com/edit/angular-zhsqqd – DeborahK Jan 25 '19 at 21:34

3 Answers3

0

Try to use an object instead a primitive one. I noticed angular's binding doesn't work very well with primitives.

TS

toggleTooltip:any = {value:false};

displayTooltipMessage(flag: boolean) {
    console.log(flag); // Value passes
    this.toggleTooltip.value = flag;
    console.log(this.toggleTooltip); // udpated value
}

HTML

<button (click)="displayTooltipMessage(true)">Press me</button>

 {{toggleTooltip.value}}
Sáskya Gurgel
  • 151
  • 1
  • 3
0

I don't think this is going to solve the problem, but try defining a type to your variable:

toggleTooltip: boolean = false

And make sure those lines of code are inside your exported component.

Felipe Micali
  • 827
  • 1
  • 11
  • 25
0

I think where you are changing the variable within the code you will need to use NgZone. 

constructor(private ngZone: NgZone){}

this.ngZone.run(() => {
     this.loadData();
 });

This is similar to Triggering change detection manually in Angular

dmoore1181
  • 1,793
  • 1
  • 25
  • 57