angularjs - Angular2 component - function not being recognised -

i trying create separate component deal presentation of news feed. works fine when have within app.component.ts, when separate code own component (news-feed.component.ts) displays fine when menu button clicked (e.g.: <button (click)="getnews('the-telegraph')">telegraph</button>) failing recognise function 'getnews' , following error generated:'exception: error in ./appcomponent class appcomponent - inline template:4:12 caused by: self.context.getnews not function'.

please note - running getnews() function within newsfeedcomponent when site first loads.

here app.component.ts:

import {component} '@angular/core';  import {newsservice} './news.service';  import {observable} 'rxjs/rx';    import { newsfeedcomponent }  './news-feed.component';    @component({    selector: 'news-app',    template:`    <h1>news feed</h1>    <nav>      <button (click)="getnews('bbc-news')">bbc</button>      <button (click)="getnews('the-telegraph')">telegraph</button>      <button (click)="getnews('the-guardian-uk')">guardian</button>      <button (click)="getnews('independent')">independent</button>      <button (click)="getnews('financial-times')">financial times</button>      <button (click)="getnews('the-economist')">the economist</button>      <button (click)="getnews('sky-news')">sky news</button>      <button (click)="getnews('the-new-york-times')">the new york times</button>    </nav>    <news-feed></news-feed>    `,    styleurls: ['app/app.component.css']  })  export class appcomponent {    }

here news-feed.component.ts:

import {component} '@angular/core';  import {newsservice} './news.service';  import {observable} 'rxjs/rx'    @component({    selector: 'news-feed',    template: `      <ul>        <li *ngfor="let article of news">        hello2          <a href="{{article.url}}" target="_bank"><h2>{{article.title}}</h2></a>          <p>{{article.publishedat}}</p>          <img src="{{article.urltoimage}}" style="width: 200px;">          <p>{{article.description}}</p>        </li>      </ul>    `  })  export class newsfeedcomponent {    // public news;      constructor(private _newsservice: newsservice) { }    ngoninit() {      this.getnews('bbc-news');    }      getnews(source) {      this._newsservice.getnews(source).subscribe(        // first argument function runs on success        data => {           this.news = data['articles']        },         error => {           //console.error("error saving food!");           return observable.throw(error);         }      );    }  }

here app.module.ts:

import { ngmodule, custom_elements_schema }      '@angular/core';  import { browsermodule } '@angular/platform-browser';  import { httpmodule }    '@angular/http';  import {formsmodule} '@angular/forms';  import {newsservice} './news.service'    import { appcomponent }  './app.component';    import { newsfeedcomponent }  './news-feed.component';    @ngmodule({      imports: [browsermodule,httpmodule,formsmodule],      declarations: [      	appcomponent,      	newsfeedcomponent      	 ],      providers: [newsservice],      schemas: [custom_elements_schema],      bootstrap: [appcomponent]  })  export class appmodule { }

apologies cutting , pasting in code. have tried working on plunker , have failed due being stupid. appreciated.

as commented @ question @echonax , @devqon, calling getnews appcomponent defined in child component newsfeedcomponent. if problem, try move function getnews appcomponent.

---

and, if want call child component's function, can way.

<nav>   <button (click)="newsfeed.getnews('bbc-news')">bbc</button>   // same </nav> <news-feed #newsfeed></news-feed>