title: How do you trigger change detection in a different component?
body: <p>When I add/remove matches from the tournament, the table doesn't update.  I understand this is because <code>teams</code> isn't updated, but the array underneath them with the <code>matches</code> is.  I know you use <code>ChangeDetectorRef</code> to update the component, but how do you tell a different component to <code>detectChanges()</code>?</p>
  
  <p>I have a map of teams, with games, attached to them in a service.</p>
  
  <pre><code>export class TournamentMatchesService {
    teams: Array&lt;Team&gt; = [];
  }
  
  export class Team {
      matches: Array&lt;Match&gt; = [];
  }
  </code></pre>
  
  <p>I have one component that adds &amp; remove matches</p>
  
  <pre><code>export class AddMatchComponent implements OnInit {
  
    matches: Array&lt;Match&gt;;
  
    constructor(private tournamentMatchesService: TournamentMatchesService, private cdr: ChangeDetectorRef) { }
  
    ngOnInit() {
  
    }
  
    addGameToTournament(match: Match) {
      this.tournamentMatchesService.addMatch(match);
      match.included = true;
      this.cdr.detectChanges();
    }
  
    removeGameFromTournament(match: Match) {
      this.tournamentMatchesService.removeMatch(match);
      match.included = false;
      this.cdr.detectChanges();
    }
  }
  </code></pre>
  
  <p>and one that displays them</p>
  
  <pre><code>export class TournamentResultsComponent implements OnInit {
  
    constructor(private tournamentMatchesService: TournamentMatchesService, 
      private cdr: ChangeDetectorRef) { }
  
    ngOnInit() { }
  
    sortData(sort: Sort) {
      this.tournamentMatchesService.sort(sort);
      this.cdr.detectChanges();
    }
  }
  </code></pre>
  
  <p>//html file</p>
  
  <pre><code>  &lt;table class="mat-elevation-z8" style="width:80%" (matSortChange)="sortData($event)" matSort&gt;
      &lt;tr&gt;
        ...tableHeader
      &lt;/tr&gt;
      &lt;tr *ngFor="let team of this.tournamentMatchesService.teams"&gt;
        ...tableBody
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>