title: Angular modal data not refreshing after data change
body: <p>I have data that is displayed in a modal.  However, when my data is updated and parent detects this, my modal data is never updated.  Am I missing something?</p>
  <p><strong>PARENT</strong>:</p>
  <pre><code>  @Input() players: Players[] = [];
  
    showPlayers() {
       const modalRef = this.modalService.open(PlayersModalComponent, {
        data: { players: this.players }
       },
      });
    }
  
   ngOnChanges(changes: SimpleChanges) {
      console.log('changes', changes);
      // This shows that players has changed and gone from say 2 players to 3 players after a few actions.  But modal doesn't update.
    }
  </code></pre>
  <p><strong>Modal</strong></p>
  <pre><code>this.players = this.modalRef.data.players;
  </code></pre>
  <p><strong>Modal HTML</strong></p>
  <pre><code>Here I just list the players and initially they are perfect. But they do not update when a new player is added and ngChanges in parent ALSO shows there is a new row.
  
  &lt;modal class=&quot;modal&quot; *ngIf=&quot;players&quot;&gt;
    &lt;div&gt;
      &lt;div *ngFor=&quot;let player of players&quot;&gt;
           {{player.name}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/modal&gt;
  </code></pre>
  <p>However, if new result is added --- since I am pulsing on API from parent.  The change is detected but the list of players in modals is not updated.</p>