Angular 2: How to create an array in a service that a component will observe changes to?
<p>I want my <code>NotificationsBellComponent</code> to receive changes to the array in the service. Assume the <code>_LocalStorageService</code> is sending back data correctly. </p>

<p><strong>Q) How do I get my component to receive changes to the service collection when they happen?</strong></p>

<p><em>The component so far:</em></p>

<pre><code>@Component({
    selector: 'notifications-bell',
    directives: [],
    templateUrl: 'build/components/notificationsBell/notificationsBell.html',
    styles: [`
        button{
            background: none !important;
            background-color: none !important;
            box-shadow: none !important;
        }
    `]
})
export class NotificationsBellComponent {

    private notifications: string[];

    constructor(
        private _platform: Platform,
        private _nav: NavController,
        private _events: Events,
        private _ConfigService: ConfigurationService,
        private _NotificationService: NotificationService
    ) {
        this.notifications = this._NotificationService.notifications;
    }
}
</code></pre>

<p><em>The service so far:</em></p>

<pre><code>@Injectable()
export class NotificationService {

  public notifications: string[];

  constructor(
    private _ConfigService: ConfigurationService,
    private _LocalStorageService: LocalStorageService,
    private _I8nService: I8nService,
    private _events: Events
  ) {
    this.getData();
  }

  getData() {
    this._LocalStorageService.getNotifications().then((data) =&gt; {
      var list: string[] = [];
      if (data.res.rows.length &gt; 0) {
        for (var i = 0; i &lt; data.res.rows.length; i++) {
          list.push(data.res.rows.item(i).notification);
        }
      }
      this.notifications = list;
    });
  }

  addItem(description: string) {
    this._LocalStorageService.addNotification(description).then(() =&gt; {
      this.getData();
    });
  }
}
</code></pre>