[Fixed] Ionic if else statement to display div

Issue

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 

Solution

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