DailyCart/UI/src/app/components/cart/cart.component.html

<style>


    *{
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    body{
        font-family: Helvetica;
        -webkit-font-smoothing: antialiased;
        background: rgba( 71, 147, 227, 1);
    }
    h2{
        text-align: center;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        padding: 30px 0;
    }
    
    /* Table Styles */
    
    .table-wrapper{
        margin: 10px 70px 70px;
        box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
    }
    
    .fl-table {
        border-radius: 5px;
        font-size: 16px;
        font-weight: normal;
        border: none;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        background-color: white;
    }
    
    .fl-table td, .fl-table th {
        text-align: center;
        padding: 8px;
    }
    
    .fl-table td {
        border-right: 1px solid #f8f8f8;
        font-size: 12px;
    }
    
    .fl-table thead th {
        color: #ffffff;
        background: #4FC3A1;
    }
    
    
    .fl-table thead th:nth-child(odd) {
        color: #ffffff;
        background: #324960;
    }
    
    .fl-table tr:nth-child(even) {
        background: #F8F8F8;
    }
    
    /* Responsive */
    
    @media (max-width: 767px) {
        .fl-table {
            display: block;
            width: 100%;
        }
        .table-wrapper:before{
            content: "Scroll horizontally >";
            display: block;
            text-align: right;
            font-size: 11px;
            color: white;
            padding: 0 0 10px;
        }
        .fl-table thead, .fl-table tbody, .fl-table thead th {
            display: block;
        }
        .fl-table thead th:last-child{
            border-bottom: none;
        }
        .fl-table thead {
            float: left;
        }
        .fl-table tbody {
           
            position: relative;
            overflow-x: auto;
        }
        .fl-table td, .fl-table th {
            padding: 20px .625em .625em .625em;
            height: 60px;
            vertical-align: middle;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto;
            width: 120px;
            font-size: 16px;
            text-overflow: ellipsis;
        }
        .fl-table thead th {
            text-align: left;
            border-bottom: 1px solid #f7f7f9;
        }
        .fl-table tbody tr {
            display: table-cell;
        }
        .fl-table tbody tr:nth-child(odd) {
            background: none;
        }
        .fl-table tr:nth-child(even) {
            background: transparent;
        }
        .fl-table tr td:nth-child(odd) {
            background: #F8F8F8;
            border-right: 1px solid #E6E4E4;
        }
        .fl-table tr td:nth-child(even) {
            border-right: 1px solid #E6E4E4;
        }
        .fl-table tbody td {
            display: block;
            text-align: center;
        }
    }
    
        .banner {
        /* The image used */
        background-image:
        url(1.jpg);
        background-position: center;
        background-size: cover;
        }
        .banner1 {
        /* The image used */
        background-image:
        url(9.png);
        background-position: center;
        background-size: cover;
        }
    
    
    
        .quantity {
            
        display: flex;
        justify-content: center;
    }
    
    .quantity button {
        width: 35px;
        height: 35px;
        border: 1px solid #000;
        color: #000;
        border-radius: 0;
        background: #fff
    }
    
    .quantity input {
        border: none;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        text-align: center;
        width: 100px;
        font-size: 20px;
        color: #000;
        font-weight: 300;
    }
    
    .total-price {
        text-align: center;
        font-size: 30px;
        color: black;
    }
    
    .total-price .fa-rupee {
        display: inline-block;
        font-size: 90%;
        margin-right: 5px;
    }
    
    @import url('https://fonts.googleapis.com/css?family=Lato:400,700,900|Open+Sans:300,400|Oswald:400,700');
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: 'Lato', sans-serif;
        font-weight: normal;
    }

    .item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.btn-pay {
    background-color: #C800Da;
    border: 0;
    color: #fff;
    font-weight: 600;
}

.fa-ticket {
    color: #0e1fa1;
}
    </style>

<!doctype html>
<html lang="en">
    
<div class="banner">
    <br><br><br><br><br>
    <ng-container *ngIf="role=='User'">

    </ng-container>
    <ng-container *ngIf="cartdto.length!=0">
        
        <div class="table-wrapper">
            <table class="fl-table">
                <thead>
                <tr>
                    <th>S NO.</th>
                    <th>IMAGE</th>
                    <th>PRODUCT NAME</th>
                    <th>PRICE</th>
                    <th>QUANTITY</th>
                    <th>TOTAL</th>
                    <th>REMOVE</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let i of cartdto; let in=index;">
                    <td>{{in+1}}</td>
                    <td><img src="{{i.image}}" style="width:80px"></td>
                    <td>{{i.pname}}</td>
                    <td>₹<span id="price">{{i.price}}</span></td>
                    <td><button (click)="dec(i,i.cid)">-</button>{{i.quantity}}<button (click)="inc(i,i.cid)">+</button></td>
                    <td><b>₹ {{i.quantity*i.price}}</b></td>
                    <td><button (click)=removeItem(i.cid)>REMOVE</button></td>
                </tr>
                <tr>
                    <td colspan="4"></td>
                    <td><button routerLink="/products">SHOP MORE</button></td>
                    <td><button routerLink="/payment">PROCEED TO PAYMENT</button></td>
                    <td><strong>Grand Total : ₹ {{grandTotal1}}</strong></td>
                    
                </tr>
                
                <tbody>
            </table>
        </div>
    

        

       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </ng-container>
        
    <ng-container *ngIf="cartdto.length==0">
        <div class="banner1">
            <br>&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="http://www.shitalexports.com/img/empty-cart.jpg" style="width:40%">
        </div>
        <br><br><br><br><br><br><br><br><br>
    </ng-container>
</div>
</html>