javascripthtmlangularangular2-jwt

Identifier 'authService' refers to a private member of the component

I really do not know where else is the problem.

Service codes:

import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  logout() {
    localStorage.removeItem('token');
  }
}

Component codes:

import { AuthService } from './../services/auth.service';

export class HomeComponent {
  constructor(private authService: AuthService) {}
}

And at the end of the HTML codes:

<h1>
  Home Page
</h1>
<p *ngIf="authService.isLoggedIn">
  Welcome {{ authService.currentUser.name }}
</p>
<ul>
  <li *ngIf="authService.isLoggedIn() && authService.currentUser.admin">
    <a routerLink="/admin">Admin</a>
  </li>
  <li *ngIf="authService.isLoggedIn()">
    <a routerLink="/login">Login</a>
  </li>
  <li *ngIf="authService.isLoggedIn()" (click)="authService.logout()">
    <a>Logout</a>
  </li>
</ul>

My problem with the HTML code is the authService. Thank you for reading.

Solution

  • All the properties defined in the class that you use in the html template should be public. You have defined the authService as private and it's complaining about this.

    In order to fix the issue you have to make it public:

    constructor(public authService: AuthService) { }