CODEWITHSUNDEEP
angularionic4
Ali Ghassan
Ali Ghassan

Reputation: 1180

Ionic if else statement to display div

I am using the ionic framework to make an app. I want to do an if/else statement to display div in html . l am taking data from navigation url from page 1 to page 2 . in page 2 l use activated route params to get data from page 1 .

Sometimes the data coming from url like that mypage/iaw/null so l want to check if string coming null hide div .

what i did 

 public myFlag: boolean = false;
  id : any

      constructor(private nav : NavController,private activatedRoute : ActivatedRoute) {
                    this.activatedRoute.params.subscribe((params) => {

                      this.id = params['id'];
                    });

            if (this.id=="null") {
                this.myFlag = true

            }else{
              this.myFlag = false
            }

html 

  <div *ngIf="myFlag">

    <ion-button expand="block" fill="outline"color="success"  (click)="navigate(id)">Flight route</ion-button>

  </div>      
  <div *ngIf="!myFlag">

    No data 
  </div>

my url example 

localhost/flightserachdetails/IA172/Isfahan/1555496100/CR9/scheduled/Iraqi%20Airways/IAW/null

Upvotes: 1

Views: 8195

Answers (3)

Davide Simboli
Davide Simboli

Reputation: 81

You can implement the if else statement like this:

<div *ngIf="myFlag;else other_content">
  <ion-button expand="block" fill="outline"color="success (click)="navigate(id)">Flight route</ion-button>
</div>
<ng-template #other_content>
  No data
</ng-template>

Upvotes: 1

Fedor Patutinskiy
Fedor Patutinskiy

Reputation: 123

I think that you should change your constructor code something like this 

constructor(private nav : NavController,private activatedRoute : ActivatedRoute) {
    this.activatedRoute.params.subscribe((params) => {
        this.id = params['id'];
        this.myFlag = this.id == "null";
        console.log(this.myFlag);
    });
}

The main thing here is to initialize "id" field inside ativate route subscribtion handler.

However, the best way to implement routing in angular is to use RouterModule. Checkout this link for more details https://angular.io/guide/router

Upvotes: 2

Yash Rami
Yash Rami

Reputation: 2327

you can implement if else like this so no need to write the separate ngIf for checking else condition 

 <div *ngIf="myFlag != null; elseCondition">
    <ion-button expand="block" fill="outline"color="success"  (click)="navigate(id)">Flight route</ion-button>
  </div>      
  <ng-template #elseCondition>
    No data 
  </ng-template>

Upvotes: 0

Related Questions