Display button in angular if boolean from mixed array is true

Issue

I am trying to build a basic angular SPA for a Pizzeria

I have an array with different types of Pizzas with string, number and boolean types.

Out of this array i am generating cards with bootstrap, showing name price description image and availability.

If the availability of the pizza is true, the buttons “Details” and “Order” must be shown in each dish. If it is false, it shouldn’t show the buttons for that object, only the dish picture with a message “Not available”, instead.

This is 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 defined the different types in an seperate ts file

export interface Imenu {
    name: string;
    price: number;
    description?: string;
    image: string;
    available: boolean;
}

then i created my bootstrap card with my layout and the ngIf Else statements.

  <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}} = true; else variableName">
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</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}} = true; 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}} = true; else variableName"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

menu/menu.component.ts:6:16 6 templateUrl: './menu.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component MenuComponent.

This is the error I am getting.

What is the correct syntax to check the boolean from my array and display if the dish is available or not?

Solution

You should not use interpolation ({{}}) within the *ngIf directive, as it already expects a boolean expression. The correct syntax for the *ngIf directive is as follows:

<p *ngIf="val.availabilty; else variableName">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
</p>

Answered By - Arslan Razzaq