Accessing array from another component in Angular

Question

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 playerName property. I would like to access this property so that I can display it on game.component.html. I've followed online articles to the best of my ability but something still seems to be wrong. Here is the code:

player-selection.component.ts

@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 = <HTMLInputElement>document.getElementById("nameInput");
    var nameInput = (<HTMLInputElement>document.getElementById("nameInput"))
      .value;
    var playerObject = new PlayerObject(nameInput);
    this.players.push(playerObject);
    element.value = "";
    console.log(this.players[0].playerName);
  }
}

player-selection.component.html

    ...</div>
</div>
<app-game [playerArr]="players"></app-game>
<router-outlet></router-outlet>

game.component.ts

@Component({
  selector: "app-game",
  templateUrl: "./game.component.html",
  styleUrls: ["./game.component.css"]
})
export class GameComponent implements OnInit {
  @Input() playerArr: PlayerObject[];
  constructor() {}

  ngOnInit() {

  }
}

game.component.html

<mat-tab label="1">
        <div *ngFor="let name of playerArr">
            <h3>{{ name.playerName }}</h3>
            <mat-form-field class="scoreInput">
              <input matInput placeholder="Score" id="player0" />
            </mat-form-field>
        </div>
</mat-tab>

What is your issue exactly?

ulmas
– ulmas

2019-11-23 03:57:54 +00:00
Commented Nov 23, 2019 at 3:57 — ulmas
– ulmas, Commented Nov 23, 2019 at 3:57
is your console.log working?

Anand Bhushan
– Anand Bhushan

2019-11-23 04:29:09 +00:00
Commented Nov 23, 2019 at 4:29 — Anand Bhushan
– Anand Bhushan, Commented Nov 23, 2019 at 4:29

m0kova01 · Accepted Answer · 2019-11-23 04:42:50Z

2

I was able to achieve this using a data service. I created the following class in data.service.ts

export class DataService {
  private playerArray: PlayerObject[];
  // private playerIndex: number = 0;
  constructor() {
    this.playerArray = [];
  }

  addPlayer(player: PlayerObject) {
    this.playerArray.push(player);
    // this.playerIndex++
  }
  returnIndexName(index: number) {
    return this.playerArray[index].playerName;
  }
  playerCount() {
    return this.playerArray.length;
  }
  returnEachPlayerObject() {
    return this.playerArray;
  }
  addToScores(holesArray: number[], index: number) {
    for (var i = 0; i < holesArray.length; i++) {
      this.playerArray[index].scores.push(holesArray[i]);
    }
  }

  totalScores(index: number) {
    return this.playerArray[index].scores.reduce((x, y) => x + y);
  }
}

answered Nov 23, 2019 at 4:42

m0kova01

1593 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing array from another component in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related