*ngif does not check in background

Ionic Framework ionic-v3
1

hi all

i finished implement my app , bu i notice some improper action with *ngif in html ,
it’s look like the app show how to check my condition , and the process not in background

example when condition ==1 show case1 , when condition == 2 show case 2 , when condition == 3 show case 3 ,

if i click button and the condition == 3
the app show case 1 for sec then case 2 for sec then show the correct case

my code like this

case1
case2
case3

this also happen if i have one condition *ngIf - else

Any help would be appreciated.

1 Like
2

please use [hidden] it is better option for ionic because of in ionic html bind one time after not loading html means not loading page again for UI side for condition check again in one module

1 Like
3

thanks , but what about if i want to show some buttons in some cases and different in another , would you please show me an example

4

I haven’t the same example but please check the following link

1 Like
5

thanks you

i tried it it’s work perfect with 2 condition :+1:

but in my popover where my options show depends on 4 conditions , it does not work , my popover show 3 different options for sec then show the correct options

1 Like
6

you have 4 condition please take 4 variable for boolean and apply only one condition true and try it

7

I may not clear it will , but i also tried one condition true or false for may options in popover , but it does not work , same problem

i appreciate ur help

8

please copy your code I will check it

10

in my popbover , i tried hidden too , same problem

 <button  ion-item (click)="openR()">open  </button>
  <div *ngIf="this.status =='0'">
  <button  ion-item  (click)="view()"> view</button></div>
  <div *ngIf="this.status=='1'">
  <button  ion-item  (click)="share()"> share</button></div>
  <div *ngIf="this.status=='0'">
   <button  ion-item  (click)="publish()" > publish</button></div>
  <div *ngIf="this.status=='1'">
  <button  ion-item   (click)="copy()" >  copy</button></div>
  <button ion-item  (click)="editData()"> edit</button>
  <div *ngIf="this.status=='1'">
  <button  ion-item (click)="updateData()"> update</button></div>
11

as per your code, I created logic for display button

home.module.ts

public status_0 = true;
public status_1 = false;

 ngOnInit() {
   this.changeDisplayMethod('openR')
}

openR(){
    this.changeDisplayMethod('openR') // declare like this
   ....
   ...
}
share(){
   this.changeDisplayMethod('share') // declare like this
   ....
   ...
}
publish(){
   this.changeDisplayMethod('publish') // declare like this
   ....
   ...
}
editData(){
   this.changeDisplayMethod('editData') // declare like this
   ....
   ...
}
changeDisplayMethod(valueMethod){
   if( valueMethod === "openR"){
      this.status_0 = true;
      this.status_1 = false;
   }else if(valueMethod === "view"){
      this.status_0 = true;
      this.status_1 = false;
  }else if(valueMethod === "share"){
     this.status_0 = false;
     this.status_1 = true;
  }else if(valueMethod === "publish"){
    this.status_0 = true;
    this.status_1 = false;
  }else if(valueMethod === "copy"){
    this.status_0 = false;
    this.status_1 = true;
  }else if(valueMethod === "editData"){
    this.status_0 = false;
    this.status_1 = true;
  }else if(valueMethod === "updateData"){
    this.status_0 = false;
    this.status_1 = true;
  }else{
    this.status_0 = false;
    this.status_1 = true;
 }

}

home.html.ts

`

<button ion-item (click)=“openR()”>open </button>
<div [hidden]="!status_0" ><button ion-item (click)=“view()”> view</button></div>
<div [hidden]="!status_1" > <button ion-item (click)=“share()”> share</button></div>
<div [hidden]="!status_0" > <button ion-item (click)=“publish()” > publish</button></div>
<div [hidden]="!status_1" > <button ion-item (click)=“copy()” > copy</button></div><button ion-item (click)=“editData()”> edit</button>
<div [hidden]="!status_1" > <button ion-item (click)=“updateData()”> update</button></div>

`
please create other method display in above Example

12

Woow … that makes sense…thank you. … i appreciate ur effort … i will try it

1 Like