In my current project, I am utilizing angular 7 and bootstrap 4. My goal is to display detailed information right below the selected item. The screenshot below shows where I'm currently at: https://i.sstatic.net/su9tI.jpg
Here is what I aim to achieve:
https://i.sstatic.net/aDw0C.jpg
Currently, the team details appear at the bottom of the page, as shown in the first picture. However, I want the team detail to be positioned exactly below the selected card.
Below is a snippet of my code:
TeamListComponent
export class TeamListComponent implements OnInit {
teams: any;
constructor(private ts: TeamsService) { }
ngOnInit() {
this.ts.getTeams().subscribe(data=> {
this.teams = data.teams;
})
}
}
TeamListTemplate; Note: The router-outlet directs to the team detail component.
<div class="container-fluid">
<div class="row">
<app-team *ngFor="let team of teams" [team]=team></app-team>
</div>
<div class="row">
<router-outlet></router-outlet>
</div>
</div>
Single team component
export class TeamComponent{
@Input() team: any;
}
Team template: Note: Bootstrap cards are used to showcase the team.
<div class="card border-dark " style="width: 300px; height: 450px; margin: 10px;" [routerLink]="team.id"
routerLinkActive="active">
<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-outline-dark btn-lg btn-block" target="_blank">Visit Website</a>
</div>
</div>
If you have any suggestions or need more specific details, please don't hesitate to reach out. Thanks in advance!