angular - How to load a function of one component in another -

i have function in navbar shows notifications , want run same function in component show latest notifications not sure process.

my navbar component,

 @component({     selector: 'header-navbar',     templateurl: './app/navbar/navbar.html', }) export class navbar implements oninit  {     notification : any;     header :any;     constructor(public http: http, fbld: formbuilder, public config: config,public router: router) {     ngoninit(){         this.getnotifications();     }     getnotifications(){          var headers = new headers();         headers.append('content-type', 'application/json')         this.http.get(this.header + 'getcategorynotificationscountbyuserid/'+this.user.username, { headers: headers })             .subscribe(             response => {                 if (response.json().error_code == 0) {                     this.notification = response.json().result;                      }                  else {                     if(response.json().result == 0){                         this.notification == undefined;                     }                 }             });     } 

my post componenet,

export class posts {   showseemore: = true; articleform: formgroup; commentform: formgroup; constructor(private route: activatedroute,public _navbar : navbar,public  _notifications : getnotifications, public router: router, public http: http, public config: config, fbld: formbuilder) {}   //here want load getnotifications() function of navbar component //// 

can 1 please suggest help.

you can create 1 service shared between navbar , posts component in can define observable can subscribe observable navbar , perform action when receive value 'posts'.

//common.service.ts

import { injectable, inject } '@angular/core'; import { subject }    'rxjs/subject'; @injectable() export class commonservice {   private notify = new subject<any>();   /**    * observable string streams    */   notifyobservable$ = this.notify.asobservable();    constructor(){}    public notifyother(data: any) {     if (data) {       this.notify.next(data);     }   } } 

//navbar

import { component, oninit, ondestroy } '@angular/core'; import { subscription } 'rxjs/subscription';  import { commonservice } './common.service';  @component({   selector: 'header-navbar',   templateurl: './app/navbar/navbar.html', }) export class navbar implements oninit, ondestroy {    notification : any;   header :any;   private subscription: subscription;    constructor(public http: http, fbld: formbuilder, public config: config,public router: router, private commonservice: commonservice) {    ngoninit(){     this.getnotifications();   }    getnotifications(){     let headers = new headers();     headers.append('content-type', 'application/json')     this.http.get(this.header + 'getcategorynotificationscountbyuserid/' + this.user.username, { headers: headers }).subscribe(         response => {             if (response.json().error_code == 0) {                 this.notification = response.json().result;                  }              else {                 if(response.json().result == 0){                     this.notification == undefined;                 }             }         });      this.subscription = this.commonservice.submitobservable$.subscribe((res) => {       if (res.hasownproperty('option') && res.option === 'get_notification') {         console.log(res.value);         // perform other action here         this.getnotifications();       }     });   }    ngondestroy() {     this.subscription.unsubscribe();   } } 

//posts

import { component, oninit, ondestroy } '@angular/core'; import { subscription } 'rxjs/subscription';  import { commonservice } './common.service';  @component({   selector   : 'posts',   templateurl : './posts.html' }) export class posts implements oninit, ondestroy {   constructor( private commonservice: commonservice ){   }    ngoninit() {     this.commonservice.notifyother({option: 'get_notification', value: 'from navbar'});   } }