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

Question

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.

Answer 1

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) { }