After selecting a team from an array in one component, I am having trouble passing that selected team to another component. While I can log the selected team in the same component, I'm unable to access it in the other component.
My goal is to use the team's ID to fetch additional details about the team from an API. Any assistance on how to achieve this would be greatly appreciated. Thanks in advance!
Team.component.ts
export class TeamsComponent implements OnInit {
@Output() selectedTeam = new EventEmitter<any>();
constructor(private general: GeneralService) {
}
teamsObject: any;
teams: [];
ngOnInit() {
this.loadTeams();
}
loadTeams() {
this.general.getTeams().subscribe(data => {
this.teamsObject = data;
this.teams = this.teamsObject.teams;
});
}
onSelectTeam(team: any) {
this.selectedTeam.emit(team);
}
}
Team.component.html
<div class="container-fluid " >
<div class="row " >
<div class="col-xs-12" *ngFor="let team of teams">
<div class="card border-dark " style="width: 250px; height: 450px; margin: 10px;" (click)="onSelectTeam(team)">
<img class="card-img-top embed-responsive" src="{{team.crestUrl}}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{team.name}}</h5>
<p class="card-text">{{team.address}}</p>
<a href="{{team.website}}" class="btn btn-primary" target="_blank">Visit Website</a>
</div>
</div>
</div>
</div>
<app-team-detail *ngIf="selectedTeam" [team]="selectedTeam"></app-team-detail>
</div>
Team-detail component
export class TeamDetailComponent implements OnInit {
@Input() team: any;
constructor() {
}
ngOnInit() {
}
}
team-detail template(this template only for demo purpose.)
<p>
{{team.name}}
{{team.crestUrl}}
{{team.address}}
{{team.website}}
</p>