Unraveling the Parent/Child Directive Mystery in Angular2/Typescript
As I delve into the world of Angular2/Typescript/javascript, there is still much for me to learn. My current project involves a card game where each of the 2 players holds a hand of 5 cards. With API calls handling the creation and retrieval of these hands, I find myself faced with a particular challenge.
Within my app.component template, I have set up two div blocks, each representing a player's hand of cards. At present, I have managed to make it work by constructing separate arrays (named p1cards and p2cards) for each player. The code snippet below illustrates this setup:
<div class="player1Cards" id="player1Cards">
<ul class="list-group">
<div draggable *ngFor="let card of p1cards" [dragData]="card"
class="list-group-item">
<img src="{{cardBluePath + card.fileName}}">
</div>
</ul>
</div>
<div class="player2Cards" id="player2Cards">
<ul class="list-group">
<div draggable *ngFor="let card of p2cards" [dragData]="card"
class="list-group-item">
<img src="{{cardBluePath + card.fileName}}">
</div>
</ul>
</div>
Further down, we encounter the export class of the whole AppComponent detailing various functionalities like creating players, generating a game board, handling dropped items, and more. The createPlayer function marks the beginning of my question, as it currently populates local arrays p1cards and p2cards with API fetched data.
What I aim to achieve is the instantiation of player objects for each player, allocation of their respective hand of cards, and storing these players within an array. While I had some success in implementing this before, I stumbled when attempting to iterate over the player.cardHand[] array using *ngFor to display the cards.
After scouring numerous online resources, the idea of incorporating child views for each player came to light. This led me to develop specific HTML and TypeScript files for the player component. Despite my efforts, I encountered an error message related to provider string within the App.Component which persisted even after refining my approach.
If anyone could guide me on rectifying this issue and steer me towards the correct path, I would greatly appreciate the assistance.