using Ngclass with obervables

Question

Im wondering what is best practice when observables for authentication. I havesections of my code where different code needs to be rendered if the user is logged in og not. Currently im using "*ngIf="accountService.currentUser$ | async" everytime i need to differentiate the code based on logged in status.

Is fine to use "*ngIf="accountService.currentUser$ | async" multiple times on the same page or handle it differently?

One of the places i need to differentiate, is where i wanne use [ngClass] to change the CSS class based on login-status. What would be the best way to do this?

account.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../_models/user';

@Injectable({
  providedIn: 'root'
})
export class AccountService {
  baseUrl = 'https://localhost:5001/api/';
  private currentUserSource = new ReplaySubject<User | null>(1);
  currentUser$ = this.currentUserSource.asObservable();

  constructor(private http: HttpClient) { }

  login(model: any) {
    return this.http.post<User>(this.baseUrl + 'account/login', model).pipe(
      map((response: User) => {
        const user = response;
        if (user) {
          localStorage.setItem('user', JSON.stringify(user));
          this.currentUserSource.next(user);
        }
      })
    )
  }

  setCurrentUser(user: User) {
    this.currentUserSource.next(user);
  }

  logout() {
    localStorage.removeItem('user');
    this.currentUserSource.next(null);
  }

  register(model: any) {
    return this.http.post<User>(this.baseUrl + 'account/register', model).pipe(
      map((user: User) => {
        if (user) {
          localStorage.setItem('user', JSON.stringify(user));
          this.currentUserSource.next(user);

        }
      })
    )
  }
}

app.component.ts:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { User } from './_models/user';
import { AccountService } from './_services/account.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Admin Cockpit';
  users: any;
  isLoggedIn = true;

  constructor(private http: HttpClient, public accountService: AccountService){}

  ngOnInit() {
    this.setCurrentUser();
    }

  setCurrentUser() {
    const user: User = JSON.parse(localStorage.getItem('user')!);
    this.accountService.setCurrentUser(user);
  }

}

app.cmponent.html:

<app-preloader></app-preloader>
<ng-container *ngIf="accountService.currentUser$ | async" >
    <app-nav></app-nav>
    <app-sidebar></app-sidebar>
</ng-container>

<!-- Content Wrapper. Contains page content -->
<div [ngClass]="{'content-wrapper': isLoggedIn, 'content-wrapper-login': !isLoggedIn}">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0">Main</h1>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <router-outlet></router-outlet>    
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<app-footer></app-footer>

Answer 1

I think i found a working answer myself.

<div [ngClass]="{'content-wrapper': (accountService.currentUser$ | async) != null, 'content-wrapper-login': (accountService.currentUser$ | async) === null}">

Seems to do the job.