Add element to Observable array typescript
<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>