title: Unable to call angular 2 service of component from another component
body: <p>I have to 2 component LeftPanelComponent and RightPanelComponent. I referred <a href="https://stackoverflow.com/questions/42405038/call-a-function-in-a-component-from-another-component">this code for my implementation</a> </p>
  
  <p>I created one shared service between two component to call abc() function of RightPanelComponent from LeftPanelComponent. </p>
  
  <p>I'm reading value from ListDialogComponent into LeftPanelComponent and passing to abc() function.</p>
  
  <p>abc() function of RightPanelComponent is calling successfully from LeftPanelComponent.</p>
  
  <p>But when I'm calling saveCustomData() angular 2 service in abc() function then I'm getting following error.</p>
  
  <pre><code>EXCEPTION: Error in ./ListDialogComponent class ListDialogComponent - inline template:29:6 caused by: Cannot read property 'saveCustomData' of undefined
  </code></pre>
  
  <p>LeftPanelComponent.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {LeftpanelService} from "../leftpanel.service"
  import {Leftpanel} from "../leftpanel";
  import {MdDialog} from "@angular/material";
  import {MdDialogRef} from "@angular/material";
  import {ListDialogComponent} from "../list-dialog/list-dialog.component";
  import {SharedService} from '../shared-service/shared-service.component';
  @Component({
   selector: 'app-leftpanel',
   templateUrl: './leftpanel.component.html',
   styleUrls: ['./leftpanel.component.css']
  })
  export class LeftpanelComponent implements OnInit {
   dialogRef: MdDialogRef&lt;any&gt;;
   leftpanels:Leftpanel[];
  
   constructor(public dialog: MdDialog,private service:LeftpanelService, private sharedService: SharedService) {
  
   }
  
   ngOnInit() {
     this.service.getLeftpanels().subscribe(lst =&gt;this.leftpanels=lst);
   }
  
   transferDataSuccess($event) {
     this.receivedData.push($event.dragData);
     this.openDialog();
   }
   openDialog() {
    this.dialogRef.afterClosed().subscribe(result =&gt; {
     console.log('result: ' + result);
     this.dialogRef = null;
     this.sharedService.componentOneFn(sessionStorage.getItem("value"));
    });
   }
   }
  </code></pre>
  
  <p>ListDialog.Component.html</p>
  
  <pre><code>&lt;form class="form-group" &gt;
  &lt;select name="itemid" #selectedCategory class="selectOption"&gt;
    &lt;option value=""&gt;Choose Item&lt;/option&gt;
    &lt;option *ngFor="let Item of Items" value="{{Item.id}}" &gt;{{Item.name}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;button  type="button" (click)="dialogRef.close('yes',getValueFromSelect(selectedCategory.value))" class="btn"&gt;Submit&lt;/button&gt;
  &lt;button  type="button" (click)="dialogRef.close('no')" class="btn"&gt;Cancel&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>ListDialogComponent.ts</p>
  
  <pre><code>import { Component,OnInit} from '@angular/core';
  import {MdDialogRef} from "@angular/material";
  import {Item} from '../item';
  import {GetListService} from '../get-list.service';
  @Component({
   selector: 'app-list-dialog',
   templateUrl: './list-dialog.component.html',
   styleUrls: ['./list-dialog.component.css']
  })
  export class ListDialogComponent implements OnInit {
   Items : Item[];
   serverItemID : string;
   constructor(public dialogRef: MdDialogRef&lt;ListDialogComponent&gt;,private service:GetListService) { }
  
   ngOnInit() {
    this.service.getItemList(this.oauthTokenService.getHeaders()).subscribe(lst =&gt;this.Item=slst);
   }
  
   getValueFromSelect(value){
    sessionStorage.setItem('value',value);
   }
  }
  </code></pre>
  
  <p>RightPanelComponent.ts</p>
  
  <pre><code>import {SaveCustomItem} from '../save-custom-item';
  import {SaveCustomService} from '../save-custom.service';
  import {SharedService} from '../shared-service/shared-service.component';
  
  @Component({
   selector: 'app-rightpanel',
   templateUrl: './rightpanel.component.html',
   styleUrls: ['./rightpanel.component.css']
  })
  export class RightpanelComponent implements OnInit {
   componentData = [];
   componentData2 = [];
   saveCustomItems:saveCustomItem[];
  
  
  constructor(public dialog: MdDialog, private service:SaveCustomService, private sharedService: SharedService) {
  this.sharedService.componentOneFn = this.abc;
  }
  abc(value) {
   if(value == "MyValue") {
     this.service.saveCustomData(value).subscribe(lst =&gt;this.saveCustomItems=lst);
   }
  }
  }
  </code></pre>
  
  <p>SharedService.ts</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  @Injectable()
  export class SharedService {
  
   componentOneFn: Function;
  
   constructor() { }
  }
  </code></pre>
  
  <p>SaveCustomService.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Http, Response, Headers} from "@angular/http";
  import {Observable} from "rxjs/Rx";
  import 'rxjs/Rx';
  import {AppSettings} from './appsettings';
  import {SaveCustomItem} from './save-custom--item';
  
  @Injectable()
  export class SaveCustomService {
  
    constructor(private http:Http) { }
  
    saveCustomData(value):Observable&lt;SaveCustomItem[]&gt; {
      let response = this.http.get(`${AppSettings.BACK_ENDPOINT}/ajax/save-custom-data?value=`+value);
      let saveCustomItems = response.map(mapSaveCustomData);
      return saveCustomItems;
    }
  }
  
  function mapSaveCustomData(response:Response):SaveCustomItem[] {
   return response.json().results.map(toSaveCustomData);
  }
  
  function toSaveCustomData(r:any):SaveCustomItem {
   let saveCustomeItem = &lt;SaveCustomItem&gt;({
     id:r.server,
     title:r.title
   });
   return saveCustomeItem;
  }
  </code></pre>