title: Angular 5 - communication between Components and Services
body: <p>I use Angular 5.
  The aim is to load data when Login is ok and to use these data in the other components.
  The data are loaded by using Services Class with getActiveTasks Method and getStats Method.
  Login Component :</p>
  
  <pre><code>@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent {
  
    constructor(private auth: AuthenticationService,
                private klinckServices: KlinckServices,
                private router: Router) { }
  
    loadData($event) {
      console.log('Authentification OK');
      let success;
      this.klinckServices.getActiveTasks(this.auth.getEcmUsername())
        .then((webScriptdata) =&gt; {
            console.log('KlinckSercices - loadData');
            success = webScriptdata;
            this.klinckServices.listTasks = success.data as ActiveTask[];
            this.router.navigate([this.klinckServices.getStats()]);
            console.log(this.klinckServices.listServices);
          },
          msg =&gt; {
            alert(msg);
            return '';
          });
     // this.router.navigate([this.klinckServices.loadData()]);
    }
  }
  </code></pre>
  
  <p>Services Class :</p>
  
  <pre><code>@Injectable()
  export class KlinckServices {
  
    listTasks: ActiveTask[];
    listServices: Stats [] = [];
  
    constructor(private apiService: AlfrescoApiService,
                private auth: AuthenticationService) {
      console.log('KlinckServices - constructor');
    }
    getStats(): string {
      this.listTasks.forEach((item, index) =&gt; {
        if (this.getServicesInListTasks(item.properties.wfvd_nomService) !== null) {
          if (! this.getServicesInListServices(item.properties.wfvd_nomService)) {
            const listLength = this.listTasks.filter(item2 =&gt; item2.properties.wfvd_nomService === item.properties.wfvd_nomService).length;
            console.log(listLength);
            const at: ActiveTask[] = [];
            for (let i = 0; i &lt; listLength; i++) {
              at.push(this.listTasks.filter(item2 =&gt; item2.properties.wfvd_nomService === item.properties.wfvd_nomService)[i]);
            }
            this.listServices.push({
              data: at,
              count: listLength,
              service: item.properties.wfvd_nomService
            });
          }
        }
      });
      return '/dashboard';
    }
    getServicesInListServices( serviceSearch: string) {
      return(this.listServices.find( x =&gt; x.service === serviceSearch));
    }
    getServicesInListTasks( serviceSearch: string) {
      return(this.listTasks.find( x =&gt; x.properties.wfvd_nomService === serviceSearch));
    }
  </code></pre>
  
  <p>When the dashboard component is loaded , i need to retrieve these data :</p>
  
  <pre><code>@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent implements OnInit, AfterViewInit 
  {
    @ViewChild(DataTableDirective) datatableElement: DataTableDirective;
    @Input() public klinckServices: KlinckServices;
  
    listTasks: ActiveTask[];
    listPatients: Patient[];
    listMedecins: Medecin[];
    listDocType: Typologie[];
    listServices: Stats [] = [];
    dtOptions: any = {};
    docNodeId: string;
    detailTaskId: any;
  
    constructor(private auth: AuthenticationService,
                public dialog: MatDialog,
                private http: HttpClient) 
    {
      console.log('DashboardComponent - constructor');
      this.listServices = this.klinckServices.listServices;
      console.log(this.listServices);
      this.getPatients();
      this.getMedecins();
      this.getDocumentType();
    }
  </code></pre>
  
  <p>But I get this error message in console : "ERROR TypeError: Cannot read property 'listServices' of undefined"</p>
  
  <p>So what is the best way to communicate between components and services ?</p>