Удалите объект localstorage перед переходом к другой ссылке в angular 8

Question

Я использую angular 8 и реализую функции входа и выхода. Чтобы добиться этого, я использую localalstorage для запоминания пользовательских данных. После входа в систему я устанавливаю данные в localStorage, и при выходе из системы я удаляю данные localalstorage Как.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService } from '../../api.service'

@Component({
  selector: 'app-header-manual',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  localStorageObject = {};
  constructor( private router: Router , private api: ApiService) { }

  handleLogout(flag){
    if(!flag)           
      this.router.navigate(['/login']);

    let access_token = this.localStorageObject && this.localStorageObject['token'];
    if(access_token){
      this.api.postAPI('LogoutAPI' , {"access_token" : access_token}).subscribe(data => { 
        localStorage.removeItem('users');
        setTimeout(() => {
          this.router.navigate(['/login'])
        } ,30)
      })
    }
  }

  ngOnInit() {

    this.localStorageObject = (localStorage.getItem('users')) ? JSON.parse(localStorage.getItem('users')) : "";
    if(!this.localStorageObject || !this.localStorageObject['token']){
      setTimeout(() => {
        this.router.navigate(['/login'])
      } ,30)
    }
  }

}

Проблема: выполняется навигация, но не выполняется рендеринг компонента входа, а рендеринг того же компонента через роутер-розетку. Если я удаляю localstorage.removeItem (....), тогда он работает нормально, но мое требование - удалить объект localstorage перед перенаправлением.