I'm currently developing a simple angular Single Page Application (SPA) for a Pizzeria.
Within my application, I have an array that contains various types of Pizzas with string, number, and boolean data types.
Using this array, I am dynamically generating cards using Bootstrap, displaying the pizza's name, price, description, image, and availability status.
If a pizza is marked as available (true), I want to display "Details" and "Order" buttons for that specific dish. If it's unavailable (false), I only want to show the dish's image with a message stating "Not available".
Here is a snippet of my array:
export const pizze = [
{
name: "Margarita",
price: 13,
description: "Tomato Cheese Fior di Latte",
image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
available: false
},
{
name: "Marinara",
price: 10,
description: "Tomato, Garlic, Oregano",
image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
available: true
},
{
name: "Quattro Formaggi",
price: 15,
description: "Tomato and 4 different cheeses",
image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
available: true
},
{
name: "Diavola",
price: 14,
description: "Tomato cheese salami pimento de padron",
image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
available: false
},
I've defined the various data types in a separate ts file:
export interface Imenu {
name: string;
price: number;
description?: string;
image: string;
available: boolean;
}
Next, I created Bootstrap cards with a specific layout and utilized ngIf Else statements to handle the availability logic:
<div class="card" *ngFor="let val of menuArr; index as i">
<img src="{{val.image}}" height="350px">
<div class="card-body">
<h5 class="card-title">{{val.name}}</h5>
<p class="card-text">{{val.description}}
</p>
<p>{{val.price}}€</p>
<p *ngIf="val.availabilty; else variableName">
<button type="button" class="btn btn-primary">Details</button>
<button type="button" class="btn btn-success">Order</button>
</p>
<ng-template #variableName>
<p>Not available</p>
</ng-template>
</div>
</div>
menu/menu.component.html:11:20 - error NG5002: Parser Error: Unexpected token ; at column 27 in [{{val.availabilty}}; else variableName] in /Users/Michael/Desktop/CodeFactory/Code Review /CR3/FE20-CR3-Almhofer/FE20-CR3-Almhofer/CR3/src/app/menu/menu.component.html@10:19
11 <p *ngIf="{{val.availabilty}}; else variableName"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
menu/menu.component.ts:6:16 6 templateUrl: './menu.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ This error is occurring in the MenuComponent template.
I'm encountering this error. Can someone provide the correct syntax to check the boolean value from my array and correctly display the availability of each dish?