Как обновить переменную в другом компоненте после добавления?

Question

[Skrolea]

Добрый день. Хочу добавлять products в сервис и чтобы в хидере (а это другой компонент) обновлялось количество добавленного
Вот мой сервис (ну достаточно обычный)

import {Injectable} from 'angular2/core';
import {PRODUCTS} from '../components/products';
import {Product} from '../components/products';

export interface Cart  {
  id: Number;
  name: String;
}


@Injectable()
export class ProductService {
public products;
public cart : Cart[] = [];
  getProducts() {
  return Promise.resolve(PRODUCTS);
  }
  addToCart(products: Product) {
      this.cart.push(products);
  }
  getCart() {
    return this.cart;
  }
  getCartLength() : number {
    return this.cart.length;
  }
                            }

а вот хидер

import {Component} from 'angular2/core';
import {ProductsCmp} from '../products/components/products';
import {ProductService} from '../products/services/products-services';

@Component({
  selector: 'header',
  templateUrl: './header/header.html',
  directives: [ProductsCmp],
  styleUrls: ['./header/header.css'],
  providers: [ProductService]
})
export class HeaderCmp {
  constructor(public product:ProductService) {}
}

А как вот обновлять переменную в хидере, которая вызывается так
<p>{{product.getCartLength()}}</p>
когда я добавляю что-то еще в корзину?
Компонент header у меня подключен к app

<header></header>
  <router-outlet></router-outlet>