title: Angular2 component - function not being recognised
body: <p>I am trying to create a separate component to deal with the presentation of a news feed. It works fine when I have everything within app.component.ts, but when I separate the code into its own component (news-feed.component.ts) it initially displays fine but when a menu button is clicked (e.g.: <code>&lt;button (click)="getNews('the-telegraph')"&gt;telegraph&lt;/button&gt;</code>) it is failing to recognise the function 'getNews' and the following error is generated:'<strong>EXCEPTION: Error in ./AppComponent class AppComponent - inline template:4:12 caused by: self.context.getNews is not a function</strong>'.</p>
  
  <p>Please note - it is successfully running the getNews() function within the NewsFeedComponent when the site first loads.</p>
  
  <p>Here is app.component.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component} from '@angular/core';
  import {NewsService} from './news.service';
  import {Observable} from 'rxjs/Rx';
  
  import { NewsFeedComponent }  from './news-feed.component';
  
  @Component({
    selector: 'news-app',
    template:`
    &lt;h1&gt;News Feed&lt;/h1&gt;
    &lt;nav&gt;
      &lt;button (click)="getNews('bbc-news')"&gt;bbc&lt;/button&gt;
      &lt;button (click)="getNews('the-telegraph')"&gt;telegraph&lt;/button&gt;
      &lt;button (click)="getNews('the-guardian-uk')"&gt;guardian&lt;/button&gt;
      &lt;button (click)="getNews('independent')"&gt;independent&lt;/button&gt;
      &lt;button (click)="getNews('financial-times')"&gt;financial times&lt;/button&gt;
      &lt;button (click)="getNews('the-economist')"&gt;the economist&lt;/button&gt;
      &lt;button (click)="getNews('sky-news')"&gt;sky news&lt;/button&gt;
      &lt;button (click)="getNews('the-new-york-times')"&gt;the new york times&lt;/button&gt;
    &lt;/nav&gt;
    &lt;news-feed&gt;&lt;/news-feed&gt;
    `,
    styleUrls: ['app/app.component.css']
  })
  export class AppComponent {
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is news-feed.component.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component} from '@angular/core';
  import {NewsService} from './news.service';
  import {Observable} from 'rxjs/Rx'
  
  @Component({
    selector: 'news-feed',
    template: `
      &lt;ul&gt;
        &lt;li *ngFor="let article of news"&gt;
        hello2
          &lt;a href="{{article.url}}" target="_bank"&gt;&lt;h2&gt;{{article.title}}&lt;/h2&gt;&lt;/a&gt;
          &lt;p&gt;{{article.publishedAt}}&lt;/p&gt;
          &lt;img src="{{article.urlToImage}}" style="width: 200px;"&gt;
          &lt;p&gt;{{article.description}}&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    `
  })
  export class NewsFeedComponent {
    // public news;
  
    constructor(private _newsService: NewsService) { }
    ngOnInit() {
      this.getNews('bbc-news');
    }
  
    getNews(source) {
      this._newsService.getNews(source).subscribe(
        // the first argument is a function which runs on success
        data =&gt; { 
          this.news = data['articles']
        },
         error =&gt; {
           //console.error("Error saving food!");
           return Observable.throw(error);
         }
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is app.module.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule }    from '@angular/http';
  import {FormsModule} from '@angular/forms';
  import {NewsService} from './news.service'
  
  import { AppComponent }  from './app.component';
  
  import { NewsFeedComponent }  from './news-feed.component';
  
  @NgModule({
      imports: [BrowserModule,HttpModule,FormsModule],
      declarations: [
       AppComponent,
       NewsFeedComponent
        ],
      providers: [NewsService],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      bootstrap: [AppComponent]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Apologies for cutting and pasting in all this code. I have tried to get this working on Plunker and have failed due to being very stupid. Any help would be much appreciated.</p>