Currently, I have an Angular application that is fetching JSON resources from a Spring Boot REST API. These resources consist of simple player objects with attributes like id, name, position, and value. On the UI, each object is displayed along with a "BUY" button. When the user clicks on the "BUY" button, I want to store the selected object in an array. However, as a newcomer to TypeScript, I'm not sure how to connect the HTML method call to the logic in my .ts file.
Any assistance would be greatly appreciated. This feature is part two of my basic fantasy football-inspired app where the list (similar to an ArrayList in Java) will represent the user's selected players for their custom team.
COMPONENT.HTML:
<ul *ngIf="Ballers">
<li *ngFor="let player of Ballers">
<p class="name">{{player.name}}</p>
<p class="position">{{player.position}}</p>
<p class="value">£{{player.value}} m</p>
<button class="buyButton" (click)="buyThisPlayer()">Add to Squad</button>
</li>
</ul>
COMPONENT.TS:
@Component({
selector: 'app-player-list',
templateUrl: './playerList.component.html',
styleUrls: ['./playerList.component.scss']
})
export class PlayerListComponent implements OnInit {
Ballers: Object;
constructor(private httpService: HttpService) { }
ngOnInit() {
this.httpService.getPlayers().subscribe(data => {
this.Ballers = data;
console.log(this.Ballers);
});
}
buyThisPlayer(){
selectedKickers.push(this); // Is this the correct way to add the object to the array?
}
}