When the angular variables are updated inside the component after some API calls, it should be reflected in the UI of the mobile view (depending on the value of *ngIf), but it does not. It works on the web, desktop, etc. And if I create an extra button on the mobile page and click it OR reload the page, it works in mobile too. It seems like the mobile page requires initial interaction, to load the page correctly according to the variable change. It does not do the work itself.
<div *ngIf="!hasToken">
<button type="button" class="btn btn-primary" (click)="Login()"><img src="images/icon-ms.ico">Login</button>
</div>
AngularComponent.ts
ngOnInit() {
this.exampleService.getData(id).subscribe((result) => {
if (result != undefined || result != null) {
this.hasToken= true;
}
}
Once the variable hasToken becomes true on ngOnInit(), it should hide the Login button, but it does not, though the value of the variable gets updated.
Any suggestion to solve this would be appreciated.
I believe that what you're experiencing is related to change detection. I suggest avoiding manually subscribing in the controller by using the async pipe. This improves the performance and works great with change detection.
You can do something like this:
readonly hasToken$ = this.exampleService.getData(id).pipe(map(result => !!result));
<div *ngIf="(hasToken$ | async) === false">
<button type="button" class="btn btn-primary" (click)="Login()"><img src="images/icon-ms.ico">Login</button>
</div>
I think the way you init/update your variable is incorrect. Can you add your .ts? You can also check ChangeDetectorRef.MarkForCheck() and ngOnchanges() but it's way too overkill for your problem.