title: Angular 6 - passing data between components
body: <p>I am learning angular 6 and typescript and have some problems with passing data between multiple components. It looks like on "expense-box.component.ts" component "this.participants" in ngOnInit method is null/empty. So I am not getting any data. </p>
  
  <p>First (parent) component - <strong>expense.component.ts</strong>:</p>
  
  <pre><code>public participants = new Array&lt;Participant&gt;();
  
  getParticipants(): void {
      this.participantService
        .getParticipants(token)
        .subscribe(participants =&gt; (this.participants = participants));
  }
  </code></pre>
  
  <p>Participant service - <strong>participant.service.ts</strong> (to show whats inside getParticipants method)</p>
  
  <pre><code>  getParticipants(token: string): Observable&lt;Participant[]&gt; {
      return this.http.get&lt;Participant[]&gt;(`${this.url}/${token}`).pipe(
        tap(() =&gt; this.log(`Participants assigned to trip with token: ${token} fetched`)),
        catchError(this.handleError&lt;Participant[]&gt;('getParticipants'))
      );
    }
  </code></pre>
  
  <p>It's html template - <strong>expense.component.html</strong>:</p>
  
  <pre><code>&lt;app-expense-box *ngIf="selectedSplitTab == 1" [participants]="participants"&gt;&lt;/app-expense-box&gt;
  </code></pre>
  
  <p><strong>expense-box.component.ts</strong></p>
  
  <pre><code>export class ExpenseBoxComponent implements OnInit {
    @Input() participants: Participant[];
    public equallyList = new Array&lt;Equally&gt;();
  
    ngOnInit() {
      this.participants.forEach(element =&gt; {
        this.equallyList.push(new Equally(element.id, false, element.name));
      });
    }
  
    addExpense(): void {
      this.expense.equallyTab = this.equallyList;
      this.expenseService.addExpense(this.expense).subscribe(() =&gt; console.log('Expense added!'));
    }
  }
  </code></pre>
  
  <p>It's html template - <strong>expense-box.component.html</strong></p>
  
  <pre><code>&lt;app-split-differently [equallyList]="equallyList" [splitEqually]="splitEqually"&gt;&lt;/app-split-differently&gt;
  </code></pre>
  
  <p>It's child component - <strong>split-differently.component.ts</strong></p>
  
  <pre><code>export class SplitDifferentlyComponent implements OnInit {
    @Input() splitEqually: boolean;
    @Input() equallyList: Equally[];
  
    public selectedSplitTab = 1;
  
    constructor() {}
  
    ngOnInit() {}
  
    enableSplitTab(selectedTab: number): void {
      this.selectedSplitTab = selectedTab;
    }
  }
  </code></pre>
  
  <p>It's html template - <strong>split-differently.component.html</strong></p>
  
  <pre><code>&lt;div class="form-check" *ngFor="let item of equallyList"&gt;
    &lt;input class="form-check-input" type="checkbox" value="" id="equallyTabParticipant{{item.userId}}" checked="{{item.checked}}"&gt;
    &lt;label class="form-check-label" for="equallyTabParticipant{{item.userId}}"&gt;
      {{ item.userName }}
    &lt;/label&gt;
    &lt;hr&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the end I want to have current state of EquallyList while sending it to the backend. Now nothing is even displayed, because I am doing something wrong (console not logging any errors).</p>
  
  <p>Thanks to the answers in comments everything is displayed correctly now. I've checked one checkbox (other are unselected), clicked save button and all "checked" are set to false so values not binded properly. Here is screen with json which is sent to back-end:</p>
  
  <p><a href="https://i.stack.imgur.com/6zMS4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6zMS4.png" alt="enter image description here"></a></p>