title: Angular 2 : Access Cookie after Creation
body: <p>I have two Component and one Service</p>
  
  <p>Components:</p>
  
  <p>1: LoginComponent</p>
  
  <p>2: HeaderComponent (Shared)</p>
  
  <p>Service:</p>
  
  <p>1: authentication.service</p>
  
  <p>In LoginComponent I use authentication.service to get authenticate and after successful authentication, I add User info into the Cookie and in the end, I automatically navigate to return-URL page, in the returned page I have a Component for the header that must show User info from the saved Cookie, BUT there is nothing in the cookie unless I refresh manually the page with F5 button.</p>
  
  <p>My question is how can I access the cookie without refreshing the page?</p>
  
  <p><strong>Update</strong></p>
  
  <p>this is where I want to get the cookie:</p>
  
  <pre><code> import { Component, OnInit } from '@angular/core';
  import { CookieHelper } from '../../_helpers/index';
  
  @Component({
  moduleId: module.id,
  selector: 'app-header-ichart',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css']
  })
  
  export class HeaderComponent implements OnInit {
  currentUser = '';
  isLogged = false;
  constructor(private cookie: CookieHelper) { }
  
  
  ngOnInit() {
       this.isLogged = this.cookie.checkCookie('currentUser');
       if (this.isLogged) {
           this.currentUser = JSON.parse(this.cookie.getCookie('currentUser'));
       }
  }
  }
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>I used your suggestion technic to achieve my goal but need more help:</p>
  
  <p>I Update my AuthenticationService to serve Observable Variable:</p>
  
  <p><strong>AuthenticationService:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { Subject } from 'rxjs/Subject';
  import 'rxjs/add/operator/map';
  
  import { AppConfig } from '../app.config';
  import { CookieHelper } from '../_helpers/index';
  
  @Injectable()
  export class AuthenticationService {
  
    cookies: Object;
    keys: Array&lt;string&gt;;
    user$ = new Subject&lt;any&gt;();
  
    constructor(private http: Http, private config: AppConfig, private cookie: CookieHelper) { }
  
    login(username: string, password: string) {
      const headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');
      let body = `grant_type=${'password'}&amp;username=${username}&amp;password=${password}`;
  return this.http.post(
    this.config.apiUrl + '/token',
    body, { headers: headers })
    .map((response: Response) =&gt; {
      // login successful if there's a jwt token in the response
      let user = response.json();
  
      if (user &amp;&amp; user.access_token) {
        user['username'] = username;
         // Observable Variable
        this.user$.next(JSON.stringify(user));
  
        // store user details and jwt token in cookie to keep user logged in between page refreshes
        this.cookie.addCookie('currentUser', JSON.stringify(user));
      }
    });
    }
  
    getUser(): Observable&lt;any&gt; {
      return this.user$.asObservable();
    }
  
    logout() {
  // remove user from cookie to log user out
  this.cookie.removeCookie('currentUser');
     // Logout Subscribe
  this.user$.next(null);
  
    }
  }
  </code></pre>
  
  <p><strong>HeaderComponent:</strong></p>
  
  <pre><code>export class HeaderComponent implements OnInit {
  currentUser = '';
  isLogged = false;
  constructor(private cookie: CookieHelper, private auth: AuthenticationService) { }
  
  
  ngOnInit() {
      // Get the currentUser from Observable Variable
      this.auth.getUser().subscribe(currentUser =&gt; { this.currentUser = currentUser; });
      console.log(this.currentUser);
       this.isLogged = this.cookie.checkCookie('currentUser');
       if (this.isLogged) {
           this.currentUser = JSON.parse(this.cookie.getCookie('currentUser'));
       }
  }
  }
  </code></pre>