title: Angular 7 Local Storage
body: <p>I have looked around the web and found the best way to use local Storage is to have it in a service I have a login controller that sends an API token and user details in its response I am setting those details in local Storage and then I am using angular router to navigate to my dashboard in the header I am getting the set local Storage but the DOM doesn't update I though if I subscribed to the local storage service it would update but ti doesn't work can someone point me in the right direction for what I need to do to get the header to update when the user logs in and should I use a different type of local Storage since there is others out there Thank you in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*header Component*/
  import { Component, OnInit } from '@angular/core';
  import { SharedService } from '../shared.service';
  import { Router } from '@angular/router';
  import { LocalStorageService } from '../../global-services/localstorage.service';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
  })
  export class HeaderComponent implements OnInit {
  
    user: any;
  
      constructor(
                private Shared: SharedService,
                private router: Router,
                private local: LocalStorageService) { }
    fave: any;
      ngOnInit() {
        this.getLocal();
      }
      getLocal() {
          this.local.getLocal().subscribe(
            data =&gt; {
              this.user = data;
            }
          );
  
  
      }
      logout() {
        this.local.logout();
      }
  }
  /*LocalStorage Service*/
  import { Injectable, OnDestroy } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class LocalStorageService {
  
      setLocal(user) {
        return localStorage.getItem(user);
  
      }
      getLocal() {
        return localStorage.getItem('user')
      }
  
      logout() {
      return localStorage.removeItem('user');
      }
  }
  /* Login Component*/
  import { Component, OnInit } from '@angular/core';
  import { LoginService } from '../login.service';
  import { Router } from '@angular/router';
  import { LocalStorageService } from '../../global-services/localstorage.service'
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit {
  
    constructor(
      private api: LoginService,
      private router: Router,
      private local: LocalStorageService) { }
  /*Vars*/
    user: any;
    email: string;
    password: string;
  
    ngOnInit() {
    }
    onSubmit() {
      this.api.login(this.email, this.password).subscribe(
        data =&gt; {
          this.user = data;
          localStorage.setItem('api_token', this.user.api_token),
          localStorage.setItem('user', JSON.stringify(this.user));
          this.router.navigateByUrl('/dashboard');
        }
      );
      this.local.setLocal(this.user);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>/*Header HTML*/
  &lt;nav class="uk-navbar-container uk-margin nav1" uk-navbar="mode: click" *ngIf="router.url != '/login'"&gt;
    &lt;div class="uk-navbar-left"&gt;
      &lt;ul class="uk-navbar-nav nav1"&gt;
        &lt;li class="uk-active nav1"&gt;&lt;a href="/dashboard"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav1"&gt;&lt;a href="/form"&gt;Create form&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav1"&gt;&lt;a uk-icon="icon: books" href="/books"&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;div class="uk-position-right favBtn"&gt;
    &lt;a *ngIf="this.user !== null" uk-icon="icon: user" class="uk-button uk-button-default"style="border:none;"&gt;{{user.message}}  {{user.last_name}}&lt;/a&gt;
      &lt;a uk-icon="icon: sign-in" *ngIf="this.user == null" href="/login" style="border:none; color:white;"&gt;Login&lt;/a&gt;
      &lt;div *ngIf="this.user !== null" uk-dropdown="mode: click" class=" uk-width-large" uk-dropdown&gt;
        &lt;hr class="uk-divider-icon uk-width-1-1"&gt;
        &lt;div class="uk-child-width-1-1@s" uk-grid&gt;
          &lt;a uk-icon="icon: sign-out" href="/login" (click)="logout()"&gt;Logout&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  
  Any help would be greatly appreciated </p>