vendor-app/src/app/admin/malls/malls.component.html

<section class="common_card">
    <div class="card_header">
        <h4>Malls</h4>
        <div>
            <input type="text" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()"
                autocomplete="off" #searchbar>
            <button class="rect-button" (click)='showModal = true'>+</button>
        </div>
    </div>
    <div class="card_upfold">
        <li *ngFor='let malls of allMalls' class="mallList">
            <img src="{{malls.image_url}}">
            <div class="upfold-content">
                <h5> {{malls.mall_name}}</h5>
                <p>{{malls.description}}</p>
                {{showModal}}

                <div>
                    <span *ngIf='malls.outlet.length > 0'>Outlets: {{malls.outlet.length}}</span>
                    <span *ngIf='malls.outlet.length === 0'>Outlets: 0</span>
                    <span> Rating: {{malls.rating}} </span>
                    <span> Location: {{malls.mall_address}}</span>
                </div>

            </div>
        </li>
    </div>

    <div class="popUp">
        <div class="popup-box">
            <ul class="input-list">
                <h4>Mall Details:</h4>

                <div class="mallDetails">
                    <li>
                        <label>Name:</label>
                        <input type="text" [(ngModel)]="newMall.mall_name" required>
                    </li>
                    <li>
                        <label>Description:</label>
                        <input type="text" [(ngModel)]='newMall.description' required>
                    </li>
                    <li>
                        <label>Image:</label>
                        <input type="text" [(ngModel)]='newMall.image_url' required>
                    </li>
                    <li>
                        <label>Address:</label>
                        <input type="text" [(ngModel)]='newMall.mall_address' required>
                    </li>
                    <li>
                        <label>Mall Distance:</label>
                        <input type="number" [(ngModel)]='newMall.mall_distance' required>
                    </li>
                    <li>
                        <label>Rating:</label>
                        <input type="number" [(ngModel)]='newMall.rating' required>
                    </li>
                    <li>
                        <label>Offers Count:</label>
                        <input type="number" [(ngModel)]='newMall.offers_count' required>
                    </li>
                </div>

                <h4>Advertisement:</h4>
                <div class="addDetails">
                    <li>
                        <label>Created By</label>
                        <input type="text" [(ngModel)]="newMall.advertisement.createdBy" required>
                    </li>
                    <li>
                        <label>Image</label>
                        <input type="text" [(ngModel)]="newMall.advertisement.image" required>
                    </li>
                    <li>
                        <label>Type</label>
                        <input type="text" [(ngModel)]="newMall.advertisement.type" required>
                    </li>
                    <li>
                        <label>Updated By</label>
                        <input type="text" [(ngModel)]="newMall.advertisement.updatedBy" required>
                    </li>
                </div>

                <h4>Outlet Details:</h4>
                <div class="outletdistance">
                    <li>
                        <label>Outlet Name</label>
                        <input type="text" [(ngModel)]="newMall.outlet.outlet_name" required>
                    </li>
                    <li>
                        <label>Description</label>
                        <input type="text" [(ngModel)]="newMall.outlet.description" required>
                    </li>
                    <li>
                        <label>Outlet Timings</label>
                        <input type="text" [(ngModel)]="newMall.outlet.outlet_timing" required>
                    </li>
                    <li>
                        <label>Image</label>
                        <input type="text" [(ngModel)]="newMall.outlet.image_url" required>
                    </li>
                    <li>
                        <label>Outlet GST</label>
                        <input type="number" [(ngModel)]="newMall.outlet.outlet_Gst" required>
                    </li>
                    <li>
                        <label>Outlet Type</label>
                        <input type="text" [(ngModel)]="newMall.outlet.outlet_type" required>
                    </li>
                    <li>
                        <label>Rating</label>
                        <input type="number" [(ngModel)]="newMall.outlet.rating" required>
                    </li>
                </div>
            </ul>

            <div class="action-buttons">
                <button class="rect-button cancel" (click)="showModal = false">Cancel</button>
                <button class="rect-button" (click)="addMall()">Add</button>
            </div>
        </div>
    </div>
</section>