Angular9 Update variable to show/hide HTML after content is loaded

Question

How to show/hide HTML content after the component has been loaded?

I'm trying to show/hide a button on the header toolbar that changes depending on the login state.

The toolbar component below is loaded in the home page. Since the component is loaded on home page, it never gets reloaded again. When I login, I want to show and hide that ion-buttons section accordingly.

After login, I've called the getAndSetLogin() function in my toolbar component class and the console log shows loggedIn=true, which should now hide the login section, but that doesn't show/hide.

Toolbar Component HTML

<ion-header>
  <ion-toolbar>
    // Hide this button if logged in
    <ion-buttons *ngIf="!loggedIn" slot="end">
      <ion-button (click)="showLoginPopover($event)">
        <ion-label class="header-toolbar-text btn-label">Log In</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

(Toolbar Component.ts) Function to update login state in toolbar component

  public getAndSetLoginState() {
    this.userService.checkedLoggedInStatus().subscribe((loggedInState: any) => {
      // loggedInState is either true or false, true if logged in and false otherwise
      this.loggedIn = loggedInState;
    });
  }

The above code from Toolbar component file is trigger when I login, which right now is just a button in a provider that sets returns a observable of true.

I've tried adding a ChangeDetectorRef like

  // Get an observable of the login state
  public getAndSetLoginState() {
    this.userService.checkedLoggedInStatus().subscribe((loggedInState: any) => {
      this.loggedIn = loggedInState;
      this.cd.markForCheck();
      // cd = ChangeDetectorRef initliased in the constructor
    });
  }

But that doesn't detect my changes either.

Am I correct that Angular only loads the HTML once, because of that, ngIf statements only work if you change them onInit or in the constructor.

How can I show/hide content depending on the login state. I've heard about using RXJS BehaviourSubject but not sure how that would help.

Answer 1

You can save loggedInState in your UserService file.

export class UserService{
    private logingData;
    private loggedIn = false;

  constructor(
    private http: HttpClient,
  ) { }

  login(){
    this.logingData= this.http.post(-call your server-);
    return this.logingData;
    this.loggedIn = this.logingData.status;
  }
}

Then bind that loggedIn varible to toolbar.

In html

<ion-buttons *ngIf="!userService.loggedIn" slot="end">

In ts

import { UserService} from "your location";

constructor(public userService: UserService){}

Then call this method from Popover component.

public getAndSetLoginState() {
   this.userService.checkedLoggedInStatus().subscribe((loggedInState: any) => {
       console.log(loggedInState);
   });
}

I hope this will help you.Thank you.