gallery.component.html

<h2>Welcome to Car Gallery</h2>
<div class="container">
    <div class="filterBox">
        <label><input type="checkbox" id="all" name="all" value="all" [(ngModel)]="checkboxAll.checked" (change)="checkboxChange($event)">all</label>
        <div class="checkboxList" *ngFor="let brand of brands">
        <label><input type="checkbox" [(ngModel)]="brand.checked" id="{{brand.brand}}" name="{{brand.brand}}" value="{{brand.brand}}" (change)="checkboxChange($event)">{{brand.brand}}</label>
        </div>
    </div>
    <div class="gallery">
        <div class="card" *ngFor="let car of cars">
            <a routerLink="/gallery/details/{{car.id}}"><img src="assets/{{car.image1}}" width="50%" height="50%"></a>
            <div class="description-contenier">
                <p class="description">Id:{{car?.id}}</p>
                <p class="description">Model:{{car?.model}}</p>
                <p class="description">Brand:{{car?.brand}}</p>
                <p class="description">{{car?.username}}</p>
            </div>
        </div>
    </div>
</div>