title: Transferring data from two components to the service (angular 2)
body: <p>I recently in angular2, I made 2 components (users.component and tasks.component) which should pass their data to the service, that it would perform some actions and pass it on to the parent component.</p>
  
  <p>users.component.ts</p>
  
  <pre><code>  import { Component } from '@angular/core';
  
    @Component({
      selector: 'users',
      templateUrl: 'app/users.component.html',
      styleUrls: ['app/users.component.css']
    })
    export class UsersComponent {
      usersArr: any[] = [];
  
      designUsers: any[] = [];
      frontendUsers: any[] = [];
      backendUsers: any[] = [];
  
      addUsersRow(): void {
        this.usersArr.push({});
      }
  
      recountUsers(i: number, userSpec: any): void {
  
              if (userSpec === 'd' || userSpec === 'D') {
                  this.designUsers.push(this.usersArr[i]);
              } else if (userSpec === 'f' || userSpec === 'F') {
                  this.frontendUsers.push(this.usersArr[i]);
              } else if (userSpec === 'b' || userSpec === 'B') {
                  this.backendUsers.push(this.usersArr[i]);
              }
  
              for (let j = 0; j &lt; this.designUsers.length; j++) {
                if (this.designUsers[j].spec == 'f' || this.designUsers[j].spec == 'b') {
                  this.designUsers.splice(j, 1);
                }
              }
  
              for (let j = 0; j &lt; this.frontendUsers.length; j++) {
                if (this.frontendUsers[j].spec == 'b' || this.frontendUsers[j].spec == 'd') {
                  this.frontendUsers.splice(j, 1);
                }
              }
  
              for (let j = 0; j &lt; this.backendUsers.length; j++) {
  
                if (this.backendUsers[j].spec == 'f' || this.backendUsers[j].spec == 'd') {
                  this.backendUsers.splice(j, 1);
                }
              }
  
      }
  
      usersName(i: number, userName: any): void {
        this.usersArr[i].name = userName;
      }
  
      usersSpec(i: number, userSpec: any): void {
  
          this.usersArr[i].spec = userSpec;
  
          this.recountUsers(i, userSpec);
      }
  
      usersPrice(i: number, userPrice: any): void {
        this.usersArr[i].price = userPrice;
      }
    }
  </code></pre>
  
  <p>users.component.html</p>
  
  <pre><code>&lt;div class="addUser" id="addUser"&gt;
                  &lt;h1&gt;USER&lt;/h1&gt;
                  &lt;button class="addUser__button" id="addUserButton" type="button" (click)="addUsersRow()"&gt;Добавить USER&lt;/button&gt;
                  &lt;div class="addUser__input" *ngFor="let rowUsers of usersArr; let i=index"&gt;{{i}}
                      &lt;input class="addUser__input-name" type="text" placeholder=" Имя: Петр" (change)="usersName(i, userName.value)" #userName required&gt;
                      &lt;input class="addUser__input-spec" type="text" placeholder=" Специализация: f/b/d" maxlength="1" pattern="[dbfDBF]" (change)="usersSpec(i, userSpec.value)" #userSpec required&gt;
                      &lt;input class="addUser__input-price" type="number" placeholder=" Цена: 2000" min="0" (change)="usersPrice(i, userPrice.value)" #userPrice required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>tasks.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
          @Component({
              selector: 'tasks',
              templateUrl: 'app/tasks.component.html',
              styleUrls: ['app/tasks.component.css']
          })
          export class TasksComponent {
              tasksArr: any[] = [];
  
              designTasks: any[] = [];
              frontendTasks: any[] = [];
              backendTasks: any[] = [];
  
              addTasksRow(): void {
                this.tasksArr.push({});
              }
  
              recountTasks(i: number, taskSpec: any): void {
  
                  if (taskSpec == 'd' || taskSpec == 'D') {
                      this.designTasks.push(this.tasksArr[i]);
                  } else if (taskSpec == 'f' || taskSpec == 'F') {
                      this.frontendTasks.push(this.tasksArr[i]);
                  } else if (taskSpec == 'b' || taskSpec == 'B') {
                      this.backendTasks.push(this.tasksArr[i]);
                  }
  
                  for (let j = 0; j &lt; this.designTasks.length; j++) {
                    if (this.designTasks[j].spec == 'f' || this.designTasks[j].spec == 'b') {
                      this.designTasks.splice(j, 1);
                    }
                  }
  
                  for (let j = 0; j &lt; this.frontendTasks.length; j++) {
                    if (this.frontendTasks[j].spec == 'b' || this.frontendTasks[j].spec == 'd') {
                      this.frontendTasks.splice(j, 1);
                    }
                  }
  
                  for (let j = 0; j &lt; this.backendTasks.length; j++) {
  
                    if (this.backendTasks[j].spec == 'f' || this.backendTasks[j].spec == 'd') {
                      this.backendTasks.splice(j, 1);
                    }
                  }
              }
  
              tasksSpec(i: number, taskSpec: any): void {
  
                  this.tasksArr[i].spec = taskSpec;
  
                  this.recountTasks(i, taskSpec);
  
                  console.log('tasksArr:');
                  console.log(this.tasksArr);
              }
  
              tasksHours(i: number, taskHours: any): void {
                  this.tasksArr[i].hours = taskHours;
              }
          }
  </code></pre>
  
  <p>tasks.component.html</p>
  
  <pre><code>&lt;div class="addTask" id="addTask"&gt;
                      &lt;h1&gt;TASK&lt;/h1&gt;
                      &lt;button class="addTask__button" id="addTaskButton" type="button" (click)="addTasksRow();"&gt;Добавить TASK&lt;/button&gt;
                      &lt;div class="addTask__input" *ngFor="let rowTasks of tasksArr; let i=index"&gt;{{i}}
                          &lt;input class="addTask__input-spec" type="text" placeholder=" Специализация: f/b/d" maxlength="1" pattern="[dbfDBF]" (change)="tasksSpec(i, taskSpec.value)" #taskSpec required&gt;
                          &lt;input class="addTask__input-hours" type="number" placeholder=" Часы: 20" min="0" (change)="tasksHours(i, taskHours.value)" #taskHours required&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>compare.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class CompareService {
      code...         
  }
  </code></pre>
  
  <p>I want to implement this structure:
  <a href="https://i.stack.imgur.com/xwj0y.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>From users.component I need to take designUsers, frontendUsers and backendUsers, and from tasks like designTasks and so on (every arrays). The question is, is it possible to implement such a structure and if not, help please the idea how it would be possible to implement this thought, thanks.</p>