title: Accessing array from another component in Angular
body: <p>I have an array that is created and populated in a component called "player-selection". In another component called "game", I would like to access the array and add pull data from it. The array is made up of objects. Each object represents a "player". Each player has a name, stored as the <code>playerName</code> property. I would like to access this property so that I can display it on <code>game.component.html</code>. I've followed online articles to the best of my ability but something still seems to be wrong. Here is the code:</p>
  
  <p><strong>player-selection.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: "app-player-selection",
    templateUrl: "./player-selection.component.html",
    styleUrls: ["./player-selection.component.css"]
  })
  export class PlayerSelectionComponent implements OnInit {
    players: PlayerObject[];
    constructor() {}
  
    ngOnInit() {
      this.players = [];
    }
    addNewPlayer() {
      var element = &lt;HTMLInputElement&gt;document.getElementById("nameInput");
      var nameInput = (&lt;HTMLInputElement&gt;document.getElementById("nameInput"))
        .value;
      var playerObject = new PlayerObject(nameInput);
      this.players.push(playerObject);
      element.value = "";
      console.log(this.players[0].playerName);
    }
  }
  </code></pre>
  
  <p><strong>player-selection.component.html</strong></p>
  
  <pre><code>    ...&lt;/div&gt;
  &lt;/div&gt;
  &lt;app-game [playerArr]="players"&gt;&lt;/app-game&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>game.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: "app-game",
    templateUrl: "./game.component.html",
    styleUrls: ["./game.component.css"]
  })
  export class GameComponent implements OnInit {
    @Input() playerArr: PlayerObject[];
    constructor() {}
  
    ngOnInit() {
  
    }
  }
  </code></pre>
  
  <p><strong>game.component.html</strong></p>
  
  <pre><code>&lt;mat-tab label="1"&gt;
          &lt;div *ngFor="let name of playerArr"&gt;
              &lt;h3&gt;{{ name.playerName }}&lt;/h3&gt;
              &lt;mat-form-field class="scoreInput"&gt;
                &lt;input matInput placeholder="Score" id="player0" /&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
  &lt;/mat-tab&gt;
  </code></pre>