I am working on Angular 7, and I am rendering a <div> ... </div> based on multiple values, these values I declared in the .ts file as : Boolean = false; the values will update in ngOnInit, but for my condition, it's keep redirecting back to the homepage while refreshing or first navigation to the page,

here my template

<div (click)="audioToggleSearchDropdown($event)" class="search-blk" id="audio-search" *ngIf="audioSearchKey || radioSearchKey || podcastSearchKey ">
            <input class="searchboxEvent" (keypress)="audioeventHandler($event)" #suggestbox id="search-audio-search"
              [formControl]="audioSearchContnet" [(ngModel)]="audioSearchValue"
              placeholder="{{ 'HEADER.AUDIO_SEARCH_PLACEHOLDER' | translate }}" />
 </div>

And my .ts file I declared the keys audioSearchKey , radioSearchKey podcastSearchKey as false,

audioSearchKey: Boolean = false;
radioSearchKey : Boolean = false;
podcastSearchKey : Boolean = false;

And in ngOnInit() I put a function to validate URL , and the function like,

if( url === "audio" || url === "search") {
  this.audioSearchKey = false;
  this.radioSearchKey = false;
  this.podcastSearchKey = false;
}else if (audioUrl.includes(url)) {
  this.audioSearchKey = true;
  this.radioSearchKey = false;
  this.podcastSearchKey = false;
} else if(radioUrl.includes(url)){
  this.audioSearchKey = false;
  this.radioSearchKey = true;
  this.podcastSearchKey = false;
} else if(podcastUrl.includes(url)){
  this.audioSearchKey = false;
  this.radioSearchKey = false;
  this.podcastSearchKey = true;
} else{
  this.audioSearchKey = false;
  this.radioSearchKey = false;
  this.podcastSearchKey = false;
}

After adding these, my existing page keeps redirecting to the homepage while clicking from a link and navigating to the page and while each refreshes. If am removing the HTML part with ngIf the rest of the functionalities and page working fine if anyone please suggest what error exactly it is?