<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>

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 ='';

  }

}

<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>

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';
    }
  }

}

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

@Injectable()
export class LoginService {

  username : string;
  logged : boolean;

  constructor() {
  }

}