I'm a beginner with Angular and Bootstrap, and I recently came across some code on a website that I tried to implement into my project. However, I encountered an issue where the button was not functioning properly. I would greatly appreciate any assistance in resolving this problem.
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-6 col-lg-4" *ngFor="let P of products">
<div class="card" *ngIf="P.Category == selectedCategory">
<img class="card-img" src="{{P.Img}}" alt="Vans">
<div class="card-img-overlay d-flex justify-content-end">
</div>
<div class="card-body">
<h4 class="card-title">{{P.Name}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Serial No. {{P.SerialNumber}}</h6>
<p class="card-text">{{P.Description}}</p>
<div class="buy d-flex justify-content-between align-items-center">
<div class="price text-success"><h5 class="mt-4">${{P.Price}}</h5></div>
<button type="button" (click)="addToCart(P)" class="btn btn-danger mt-3 curs"> Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the CSS code related to the issue:
body {
padding: 2rem 0rem;
}
.like {
font-size: 1.5rem;
}
Your help is highly appreciated. Thank you!