In my personal web development project, I'm using AngularJS for the front-end and .NET Core for the back-end to create a website for a musical instrument retailer. The model I'm working with is called "Guitar" and all the guitar data is stored in the Guitar table in the database, each with its own main image. Within the .ts file, I have an array of guitars that currently holds 5 entries. Index 0, 1, and 2 represent Martin guitars, while index 3 and 4 are Gibson guitars. To organize this information, I've divided Martin and Gibson guitars into separate components within Angular, giving each their own page and URL. Additionally, I've created a guitar-card component to style images using Bootstrap's card feature. Below is how I utilize Angular's condition statement to filter out Gibson guitars and display them exclusively:
<div *ngIf="guitar.brand == 'Gibson'">
<app-guitar-card [guitar]="guitar"></app-guitar-card>
</div>
The issue arises when the images for indices 0, 1, and 2 still take up space on the webpage even though they are not displayed, causing the 3rd index image (Gibson) to appear displaced towards the right. My goal is to prevent these first 3 images from occupying space on the page unless they are being displayed.
Check out a screenshot of the problem hereBelow is gibson-list.component.html:
<div class="container mt-5">
<div class="row">
<div *ngFor="let guitar of guitars" class="left col-lg-3 col-md-6 col-sm-12">
<div *ngIf="guitar.brand == 'Gibson'">
<app-guitar-card [guitar]="guitar"></app-guitar-card>
</div>
</div>
</div>
</div>
And here's the corresponding gibson-list.component.ts file:
export class GibsonListComponent implements OnInit {
guitars: Guitar[];
constructor(private guitarService: GuitarService, private alertify: AlertifyService) { }
ngOnInit() {
this.loadGuitars();
}
loadGuitars() {
this.guitarService.getGuitars().subscribe((guitars: Guitar[]) => {
this.guitars = guitars;
}, error => {
this.alertify.error(error);
});
}
}
I attempted to resolve this spacing issue using CSS but was unsuccessful. Any assistance would be greatly appreciated. Thank you!