Angular 10 - html template not showing correct info depending on variables

Question

I am practically new to Angular (Angular 10 used) and maybe it's a pretty easy thing but I can't figure it out. In the info component I am getting the current user details and the current book details from the tables on the server and depending on 3 variables I want to switch the buttons in the html template.

If the user is publisher (publisherMenu) -> show the publisher menu, if not (!publisherMenu) -> show regular user menu. This one is working. The publisherMenu variable is true or false in the response and the template loads the correct pair of buttons streight away.

But the problem is with the Buy Now and Add to Wishlist buttons. When you click one of them they change to You own it and In your Wishlist. That's ok but if I revisit the same book after that, the buttons are back to Buy Now and Add to Wishlist. If I refresh the page they get fixed, but only when I refresh it. If I navigate to another page and get back to this page, again, the buttons are not ok.

These two buttons depend on bookBought and inWishlist variables. For both of them I get the info in a string, split it to get an array and search for the user Id, and put true/false respectively.

If I debug in the browser everything works ok and the buttons show the correct texts... Now the function is in the constructor, I tried putting it in ngOnInit() but no difference.

Any help will be highly appreciated!

Thank you!

info.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import Backendless from 'backendless';
import { BookService } from '../book.service';
import { UserService } from 'src/app/user/user.service';


@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})

 export class DetailComponent implements OnInit { 

 currentBookData;
 currentUserData;
 publisherMenu: Boolean = false;
 bookBought: Boolean = false;
 inWishlist: Boolean = false;

constructor(private router: Router, private bookService: BookService, private userService: UserService) {

//get book data
let getBookData = Backendless.Data.of('books').findById({objectId})
.then(currentBook => {
//console.log('Current Data: ' + JSON.stringify(currentBook));
return currentBook;
})
.catch(error => {
console.log(error);
});

getBookData.then(result => {
  console.log(JSON.stringify(current book));
  this.currentBookData = result; 
})


//  get user data
let getUserData = Backendless.UserService.getCurrentUser()
.then(function(currentUser) {
return currentUser;
 })
.then(result => {
   this.currentUserData = result;  
   console.log('currentUser :' + JSON.stringify(result));
   if (this.currentUserData.publisher) {
     this.publisherMenu = true;
   } else {
  this.publisherMenu = false;
}
if(!this.currentUserData.wishlist) {
  this.inWishlist = false;
} else {
let currentWishlist = this.currentUserData.wishlist.split(',');
if(currentWishlist.indexOf(this.currentGameData.objectId) !== -1) {
  this.inWishlist = true;
} else {
  this.inWishlist = false;
}
}
if(!this.currentUserData.orders) {
  this.bookBought = false;
} else {
let currentOrders = this.currentUserData.orders.split(',');
if(currentOrders.indexOf(this.currentBookData.objectId) !== -1) {
  this.bookBought= true;
} else {
  this.bookBought= false;
}
 }
 })
 .catch(function (error) {
   console.error(error)
  })

//current book id: 88443C15-9CEB-4FF2-B174-D88D7F3324D3

console.logs

current book :{"title":"Demo Book","ownerId":"7B8EF09F-9DF3-4CED-A6B7-
39C3CD90089D","sales":1,"price":"31.99","___class":"books","orders":"B63744A3- 
C3C3-4FC5-8CF4-3FCD131A0929","updated":1607770188000,"objectId":"88443C15- 
9CEB-4FF2-B174-D88D7F3324D3"}

currentUser :{"___class":"Users","wishlist":"D8005359-AFD5-487F-B130- 
3012AF3A7F1E,63DD9C7D-36D5-4CCA-96A3-81BFCBCE92CD,88443C15-9CEB-4FF2-B174-        
D88D7F3324D3,100D4187-5B37-4FD4-ADA3-77AE1392F905,96BD531E-B717-4AEB-8DA5- 
51805143EC07","ownerId":"B63744A3-C3C3-4FC5-8CF4-3FCD131A0929","name":"Demo 
User","publisher":false,"orders":"0BF4737D-F1C4-49C0-AD7A- 
40279CF0E3CD,D8005359-AFD5-487F-B130-3012AF3A7F1E,88443C15-9CEB-4FF2-B174- 
D88D7F3324D3,100D4187-5B37-4FD4-ADA3-77AE1392F905,96BD531E-B717-4AEB-8DA5- 
51805143EC07","email":"[email protected]","objectId":"B63744A3-C3C3-4FC5-8CF4- 
3FCD131A0929"}

Results from the IFs on first page load or after navigating through the pages and return back:

 publisherMenu :false
 bookBought :false
 inWishlist :false

Results from the IFs if I refresh the page:

 publisherMenu: false
 bookBought: true
 inWishlist: true

info.component.html

<div *ngIf="!publisherMenu" class="book-buttons">
            <a *ngIf="!bookBought" (click)="buyBook(currentBookData.objectId)">Buy Now</a>
            <a *ngIf="bookBought">You own it</a>
             <br><br>
             <a *ngIf="!inWishlist" (click)="addBookToWishlist(currentBookData.objectId)">Add To Wishlist</a>
            <a *ngIf="inWishlist">In your Wishlist</a>
         </div>

        <div *ngIf="publisherMenu" class="book-buttons">
            <a [routerLink]="['../../add']">Add Book</a> 
  <br><br>
            <a [routerLink]="['../../my-books']">My Books</a>
            </div>

EDIT: I see now that if I don't manually refresh the page I only get the current book details and no current user details, I guess this is the reason, but why the second functions does not work like the first one, as they are practicaly the same..!?