Static member is not accessible error on navbar component

Question

I keep getting the following error: Static member is not accessible at this point:

auth.service.ts

export class AuthService {
  public static get isLoggedIn() {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null &&
      ((user.emailVerified === false && user.providerData[0].providerId === 'facebook.com') ||
        ((user.emailVerified !== false))));
  }
}

navbar.component.html

<nav *ngIf="!authService.isLoggedIn" class="navbar navbar-expand-lg navbar-dark" data-navbar="smart"></nav>

navbar.component.ts

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent implements OnInit {
  constructor(
    private authService: AuthService
  ) {}
}

How can I fix it?

Answer 1

you don't need to inject AuthService,in the component just create a property to get the value from AuthService.isLoggedIn

export class NavbarComponent implements OnInit {

  constructor(){}

  get isLoggedIn () {
   return AuthService.isLoggedIn 
  }
}

template

<nav *ngIf="!isLoggedIn" class="navbar navbar-expand-lg navbar-dark" data-navbar="smart">
</nav>