Боковая панель работает только после обновления страницы [Angular 4]

У меня есть работающее приложение Angular 4, в котором я реализую механизм входа в систему. При успешном входе в систему я перенаправляю страницу на My HeaderComponent с изображением, которое переключает боковую панель при нажатии. Но проблема в том, что после входа в систему мне нужно обновить страницу один раз, чтобы открыть боковую панель. Это не открывается с первой попытки. Я пробовал использовать window.location.reload (), но не работал. Кроме того, в некоторых связанных сообщениях предлагается перейти к тому же URL ** (/ admin в моем случае) ** с параметрами, а затем вызвать метод, который снова вызывает ngOnInit. Но в моем случае внутри ngOnInit () нет специальных данных, которые нужно получить, вместо этого мой HTML, похоже, сломан. Какие-либо предложения??

Мои компоненты: -

Login.ts

if (this.myForm.value.username === 'admin' && this.myForm.value.password === 'Pooltoo@dm!n') {
    localStorage.setItem('admintoken', 'Pooltoo@dm!n1234!@#$');
    this.router.navigateByUrl('/admin');
  }else {
    alert('Wrong Username/Password Combination. Pls try again!!');
  }

HeaderComponent.ts

    export class HeaderComponent implements OnInit {

  constructor (private adminService: AdminService, private router: Router) {


  }


   onLogout() {
    this.adminService.logOutAdmin();
    this.router.navigateByUrl('/login');
  }

  isLoggedIn() {
    return this.adminService.isLoggedIn();
  }

   ngOnInit() {

    if (!this.adminService.isLoggedIn()) {
      this.router.navigateByUrl('/login');
    }

   }


}

HeaderComponent.html

    <div id="wrapper" *ngIf="isLoggedIn()">
<nav class="navbar navbar-inverse">
  <div class="container-fluid" id="navHeight">
  <!--  <a  class="btn btn-primary" id="menu-toggle">Toggle Menu</a>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" id="menu-toggle" >Pooltoo Admin DashBoard<span><img src="assets/images/brand.png" style="width: auto; height: 30px" class="img-rounded"></span></a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <form class="navbar-form navbar-left">

      </form>
      <ul class="nav navbar-nav navbar-right">

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



  <!-- Sidebar -->
  <div id="sidebar-wrapper">

    <li class="sidebar-brand">
      <a routerLinkActive="active">
        <span><img alt="Brand" id="pooltoLogo" src="assets/images/logo.png"  style="height: 120px; width: 140px; margin-top: -50px"></span>
      </a>
    </li>

    <button class="btn btn-danger" (click)="onLogout()" style="margin-left: 50px; margin-bottom: 10px">LogOut</button>

    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['dashboard']">Dashboard</a>
      </li>
    </ul>
      <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a  [routerLink]="['configurations']">Configurations</a>
      </li>
      </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a  [routerLink]="['order-management']">Order Management</a>
      </li>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['promos']">Promo</a>
      </li>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a >Finance</a>
      </li>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['reports']">Reports</a>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['custom-reports']">Customized Reports</a>
    </ul>
    <ul class="nav nav-pills">
      <li routerLinkActive="active">
        <a [routerLink]="['dashboard-control-centre']">Dashboard Control Centre</a>
      </li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->

  <!-- /#page-content-wrapper -->
<router-outlet></router-outlet>

</div>