Angular Navbar change when Logged in

Question

I have a navbar in my App component:

app.component.html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">          
      <div *ngIf="_loginService.user.name.length > 0 && _loginService.user.id.length > 0 ; else elseBlock">
        <a class="nav-link" (click)="logout()">Logout {{ _loginService.user.name }}</a> 
      </div>
      <ng-template #elseBlock>
        <a class="nav-link" routerLink="login">Login</a>            
      </ng-template>                                          
  </ul>
</div>

app.component.ts

export class AppComponent implements OnInit {
  user: User = {
    name: '',
    id: ''
  };
  
  constructor(public _loginService: LoginService){
  }

  ngOnInit(): void {    
  }

  getUser(): User{
    return this._loginService.user;
  }

  logout(){
    this._loginService.logout()    
  }    

}

When user is logged in, the navbar should display 'logout username'. I have successfully implemented a login service to do so:

@Injectable()
export class LoginService{

    user: User = {
      name:'',
      id:''
    };

    userChange: Subject<User> = new Subject<User>();

    constructor(){
      this.userChange.subscribe(value =>{
        console.log("userChange.subscribe",value)
        this.user = value
      })
    }
  
    login(name = "",id = ""){      
      this.userChange.next({name: name, id: id})
    }
  
    logout(){
      this.userChange.next({name:'',id:''})
    }      
   
}

But as you can see, I am exposing my loginService as public in my App component.

<div *ngIf="_loginService.user.name.length > 0 && _loginService.user.id.length > 0 ; else elseBlock">

I tried to do a:

  getUser(): User{
    return this._loginService.user;
  }

and then use getUser in app.component.html:

<div *ngIf="getUser.name.length > 0 && getUser.id.length > 0 ; else elseBlock">

but it doesn't work. Please help!

Answer 1

It's not working because getUser is a function, you need to call it like :

<div *ngIf="getUser().name.length > 0 && getUser().id.length > 0 ; else elseBlock">

---

Or use getter like

get userInfo(): User{
  return this._loginService.user;
}

and

<div *ngIf="userInfo.name.length > 0 && userInfo.id.length > 0 ; else elseBlock">