login and logout with angular on the same page

Question

i'm new with angular. i'm making a login page but when i use the *ngIf directive it doesn't work as expected. login and logout links must disappear at change of the variable "logged". i used a login.service to store the "logged" status and the username.

this is the code.

app.component.html

<h1>{{ title }}</h1> 
<nav>
    <a routerLink="/posts"> Home </a>
    <a *ngIf="!logged" routerLink="/login"> Login </a>
    <a *ngIf="logged" routerLink="/posts" (click) = "logout()"> Logout</a>
</nav>
<router-outlet></router-outlet>

app.component.ts

import { Component} from '@angular/core';
import { LoginService } from './login.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My new Blog!';

  constructor(private loginservice: LoginService){ }

  logout(){
    this.loginservice.logged = false;
    this.loginservice.username ='';

  }

}

login.component.html

    <div>
  <h1>Login</h1>
  <input type="text" placeholder="Username*" #username>
  <input type="text" placeholder="Password*" #password>
  <button type="button" (click)="verify_userpass(username.value,password.value)">Submit</button>
  <div>
    <p>{{message}}</p>
  </div>
</div>

login.component.ts

    import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Location } from '@angular/common';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private loginservice: LoginService,private location: Location) { }

  ngOnInit() {
  }

  message: string;
  username: string = 'Admin';
  password: string = 'admin';



  verify_user(username,password){
    if(username===this.username && password===this.password){
      this.loginservice.username = username;
      this.location.back();
      this.loginservice.logged = true;
    }
    else{
      this.message = 'Invalid credentials';
    }
  }

}

login.service.ts

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

@Injectable()
export class LoginService {

  username : string;
  logged : boolean;

  constructor() {
  }

}

Answer 1

Your issue is that you are trying to access a variable from your app.component.html that does not exist in the AppComponent class.

You need to expose your LoginService so the UI can access it by changing the access scope and marking it as public .

  constructor(public loginService: LoginService){ }

You can then access it in the template like the following:

<h1>{{ title }}</h1> 
<nav>
    <a routerLink="/posts"> Home </a>
    <a *ngIf="!loginService.logged" routerLink="/login"> Login </a>
    <a *ngIf="loginService.logged" routerLink="/posts" (click) = "logout()"> Logout</a>
</nav>
<router-outlet></router-outlet>