I've been developing with Angular 7, trying to display a <div> ... </div> based on multiple values that I declared as : Boolean = false; in the .ts file. These values are updated in ngOnInit, but for some reason, the page keeps redirecting back to the homepage upon refreshing or when first navigating to it.
Here is 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>
In my .ts file, I have set audioSearchKey, radioSearchKey, and podcastSearchKey to false,
audioSearchKey: Boolean = false;
radioSearchKey : Boolean = false;
podcastSearchKey : Boolean = false;
And in ngOnInit(), I implemented a function to validate the URL, which looks like this:
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;
}
However, after implementing these changes, my page continues to redirect to the homepage whenever I click a link to navigate to the page or refresh it. Everything works fine when I remove the HTML part with ngIf. Can anyone suggest what might be causing this error?