title: Add element to Observable array typescript
body: <p>I have an angular 2 Component which make use of service that is getting data from rest api.</p>
  
  <pre><code>import { OnInit, Component } from '@angular/core';
  import { Hero } from './hero';
  import { HeroService } from './hero.service2';
  import { Observable } from 'rxjs';
  
  
  @Component({
      selector: 'my-list',
      templateUrl: 'app/hero-list.component.html',
  })
  export class HeroListComponent implements OnInit {
    errorMessage: string;
    heroes: Observable&lt;Hero[]&gt;;
    mode = 'Observable';
  
    constructor (
        private heroService: HeroService
    ) {}
  
    ngOnInit() { this.getHeroes(); }
  
    getHeroes() {
      this.heroes = this.heroService.getHeroes()
    }
  
    addHero (name: string) {
      if (!name) { return; }
  
      this.heroService.addHero(name)
                       .subscribe(
                         hero  =&gt; this.getHeroes()
                       );
    }
  }
  </code></pre>
  
  <p>How can i improve addHero ? Because right now it looks like very inefficient. I would like to just add hero that is returned by this.heroService.addHero() to heroes Observable. How do i do that?</p>