title: How to set value globally using map in angular 4?
body: <p>I am using a service like</p>
  
  <pre><code>import { Injectable } from '@angular/core';
   import { Client } from '../../inventory/setting/client';
  
   @Injectable()
  
   export class UIService {
   public client?: Client;
   public isFullWidth?: boolean = false;
    public data?: boolean;
     constructor() {
          }
    myMap = new Map();
  
  
  
   public setData(key, data) {
     console.log("here");
     this.myMap.set(key, data);
                             }
  
      public getData(key) {
      return this.myMap.get(key);
    }
  
    } 
  </code></pre>
  
  <p>in my controller i am seting key value using a method</p>
  
  <pre><code>     changeView() {
  this.toggle = !this.toggle;
  this.uiService.setData("category",this.toggle);
  console.log(this.uiService.getData("category"));
  }
  
  ngOnInit(): void {
  console.log("on",this.uiService.getData("category"));
  this.getCategories();
  }
  </code></pre>
  
  <p>but when i go to other page and com back to this page, what ever i set using setData method is not saved.</p>
  
  <p>the console.log in oninit method always return undefined.</p>
  
  <p>How can i make the key value pair to save globally and should be accessible if i change the page also.</p>