Scribd
Upload
18 views2 pages

Myhtml

The document outlines a menu interface for a food ordering application, displaying products with images, descriptions, and prices. Users can add items to their cart and view their current order summary on the side. A button is provided for placing the order once the user is ready.

Uploaded by

dhia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views2 pages

Myhtml

The document outlines a menu interface for a food ordering application, displaying products with images, descriptions, and prices. Users can add items to their cart and view their current order summary on the side. A button is provided for placing the order once the user is ready.

Uploaded by

dhia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<div class="container mt-5">

<div class="row">

<div class="col-md-8">

<h2 class="mb-4">Our Menu</h2>

<div class="row">

<div *ngFor="let product of products" class="col-md-4 mb-4">

<div class="card h-100">

<img [src]="[Link] || 'assets/[Link]'"


class="card-img-top" alt="{{[Link]}}">

<div class="card-body">

<h5 class="card-title">{{[Link]}}</h5>

<p class="card-text">{{[Link]}}</p>

<p class="text-muted">{{[Link] | currency}}</p>

<button (click)="addToCart(product)" class="btn btn-primary">

<i class="fas fa-plus"></i> Add to Order

</button>

</div>

</div>

</div>

</div>

</div>

<div class="col-md-4">

<div class="sticky-top pt-3">

<div class="card">

<div class="card-header bg-primary text-white">

<h5>Your Order</h5>
</div>

<div class="card-body">

<ul class="list-group mb-3">

<li *ngFor="let item of cart" class="list-group-item d-flex justify-


content-between">

<span>{{[Link]}}</span>

<span>{{[Link] | currency}}</span>

</li>

</ul>

<button (click)="placeOrder()" class="btn btn-success btn-block">

<i class="fas fa-check"></i> Place Order

</button>

</div>

</div>

</div>

</div>

</div>

</div>

You might also like