My goal is to create a basic chess application using Angular. I have developed two components, Piece and Player, with each player having an array of 16 pieces (player1 and player2).
The Piece component includes a template: <app-piece>. Now, I want to iterate over the <app-piece> for each piece type (king, queen...) of the player.
In my main view, it looks something like this:
<div id='chessboard'>
//@Loop through player1.pieces as piece
<app-piece [@something that labels uniquely this tag]="{{piece.id}}">
</app-piece>
</div>
And in my piece.component template, it appears as follows:
<div id={{specific_instance_of_the_piece.id}}>
{{specific_instance_of_the_piece.name}}
</div>
I aspire to achieve something like this:
<div id='chessboard>
<div id='1'>King</div>
<div id='2'>Queen</div>
</div>
Is there a way to accomplish this in Angular?