title: Change shopping-cart count in header in Angular
body: <p>I'm adding a shopping cart in my site header( which is a shared component). It shows the number of items in cart.<br />
  I'm initializing the cart count when user logs in and add it to localstorage as 0 count.</p>
  <pre><code>cartCount: number = 0;
  localStorage.setItem(&quot;cart_count&quot;, JSON.stringify(this.cartCount));
  </code></pre>
  <p>When item's quantity is changed, I'm setting it into <code>cart_count</code> like this:</p>
  <pre><code> localStorage.setItem(&quot;cart_count&quot;, JSON.stringify(item.quantity));
  </code></pre>
  <p>How can I let it change the count in my header as well without refreshing the page?</p>
  <p>Should I make shopping-cart as a new component and add it to header and then refresh only that component? If yes, how can I refresh that component?</p>
  <p>Thanks</p>