I am working in an Angular 4 e-commerce application ,In this I need to hide a bootstrap modal when there is no product in the cart.
when user selected some product that are added to the mycart modal screen.User can delete products from mycart .
In this case I want to do like this ,When there is no product in mycart ,if user clicked on the mycart icon it should not open the modal.
currently it open a empty modal screen .
appComponent.html
<div class="modal fade modalstyle" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header headerHeight text-white " style="background:rgb(0, 0, 0);font-weight:bold">
<h6 class="modal-title" id="exampleModalLabel">My Cart Items</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div *ngFor="let products of mycart;let i =index;">
<div class="container col-sm-12">
<div class="row">
<div class="col-sm-4 paddingforimage">
<img [src]="products['ITEM_IMAGE_PATH']">
</div>
<div class="text-info col-sm-6">
<span>
<h6>{{products?.TOTAL_QTY}} × {{products?.ITEM_PRICE}} ₹</h6>
</span>
<span>
<h6>{{products?.ITEM_DESC}}</h6>
</span>
<span>
<h6>{{products?.TOTAL_AMT}} ₹</h6>
</span>
</div>
<div class="col-sm-1 text-right">
<button type="button" class="close closebtn" aria-label="Close" (click)="detele_My_Cart(products?.ITEM_CODE)">
<span aria-hidden="true" (click)="detele_My_Cart(products?.ITEM_CODE)">×</span>
</button>
</div>
</div>
</div>
<hr>
</div>
<div class=" container row col-sm-12">
<div class="col-sm-6">
<strong>SHIPPING</strong>
</div>
<div class="col-sm-6 text-right">0 ₹</div>
<hr>
<div class="col-sm-6">
<strong>TOTAL</strong>
</div>
<div class="col-sm-6 text-right">{{my_Cart_Total_Amount}} ₹</div>
</div>
<br>
<div class="container row col-sm-12" id="wrapper">
<button type="button" class="btn btn-success buttonSize" data-dismiss="modal" routerLink="/cartsummary">
<strong>CHECK OUT</strong>
</button>
</div>
</div>
</div>
</div>
</div>
icon
<i class="fas fa-cart-plus fa-flip-horizontal text-primary" (click)="get_My_Cart($event)" data-toggle="modal" data-target="#exampleModal" style="font-size:25px;cursor: pointer;"></i>
Simple, use *ngIf
directive ? Show the modal when mycart && mycart.length
will be true
Eg
<div *ngIf="mycart && mycart.length" class="modal fade modalstyle">
....
....
<div>
Edit: Fix the edge case, trigger the close
button programmatically
In Template add #closeModalBtn
<button #closeModalBtn type="button" class="close" data-dismiss="modal">
...
</button>
In the component.ts, trigger the close
button programmatically
@ViewChild('closeModalBtn') closeModalBtn:ElementRef;
closeModalIfNoCart() {
if (!this.mycart || !this.mycart.length)
this.closeModalBtn.nativeElement.click();
}
detele_My_Cart(id) {
// todo to remove
//...
closeModalIfNoCart();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.