3

I'm having problems with "*ngIf", aparently it does nothing but when something change on the ionic page, for example, the keyboard shows when click on input or the sceen change from portrait to landscape it shows the change (hide/show) I did a simple example:

page.html

<ion-header> <ion-navbar> <ion-title>Page</ion-title> </ion-navbar> </ion-header> <ion-content> <div *ngIf="loadingVisible"> <img src="assets/imgs/example.jpg" alt=""> </div> <button ion-button (click)='showorhide();'>click to show or hide</button> </ion-content>

page.ts

import { Component } from '@angular/core'; import { NavController} from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-new-table', templateUrl: 'new-table.html', }) export class NewTablePage { public loadingVisible:boolean = false; constructor(public navCtrl: NavController){ } showorhide(){ this.loadingVisible = this.loadingVisible ? false : true; console.log(this.loadingVisible); } }

I don't know why this happend, some ideas? Thank you!

Improve this question
4
  • Can you please create stackblitz.com demonstrating your issue? And statement this.loadingVisible = this.loadingVisible ? false : true; can be shortened as this.loadingVisible = !this.loadingVisible Commented Oct 18, 2018 at 7:16
  • It is related to change detection, have a look at this article : alligator.io/angular/change-detection-strategy Commented Oct 18, 2018 at 7:18
  • can you try using changeDetectorRef.detectChanges() ? Commented Oct 18, 2018 at 7:26
  • Thank you very much @ibenjelloun and Jacopo Sciampi, ChangeDetectorRef did the trick! Commented Oct 18, 2018 at 7:35

4 Answers 4

Reset to default
8

In reference to @Oscar Bustos answer, the actual solution in code is this:

 constructor(private cd: ChangeDetectorRef) {} refresh() { this.cd.detectChanges(); }

You inject the ChangeDetectorRef and then after you updated your variable you call the detectChanges Method.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Thanks to @ibenjelloun and @JacopoSciampi for the answers

So...

Angular performs change detection on all components (from top to bottom) every time something changes in your app from something like a user event or data received from a network request. Change detection is very performant, but as an app gets more complex and the amount of components grows, change detection will have to perform more and more work. There’s a way to circumvent that however and set the change detection strategy to OnPush on specific components. Doing this will instruct Angular to run change detection on these components and their sub-tree only when new references are passed to them versus when data is simply mutated.

For more information see:

Understanding Change Detection Strategy in Angular

It did the trick, everything is working fine now!

Improve this answer

Comments

0

Issue

The issue with your implementation is try to handle two case with single function. With this implementation you don't have control on showing or hiding the element. It will always toggle.

Fix

Fortunately it has simple fix by creating two separate function for different functionality.

 show(){ this.loadingVisible = true; } hide(){ this.loadingVisible = false; }

OR

 show(showFlag:boolean){ this.loadingVisible = showFlag; }

and call appropriate method show or hide as per your requirement.

Toggle ?

Do you want to toggle your state then you can just use this line

 toggleLoading(){ this.loadingVisible = !this.loadingVisible; }

in html

<button ion-button (click)='toggleLoading()'>click to show or hide</button>
Improve this answer

Comments

0

Another way of achieving a toggle (and the better one i think, at least for your case) is adding the toggle inline in yout HTML like this

<ion-header> <ion-navbar> <ion-title>Page</ion-title> </ion-navbar> </ion-header> <ion-content> <div *ngIf="loadingVisible"> <img src="assets/imgs/example.jpg" alt=""> </div> <button ion-button (click)="loadingVisible = !loadingVisible">click to show or hide</button> </ion-content>

So in yout click event loadingVisible will receive the oposite of the current value of loadingVisible and you don't need a method in your class.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.