<ion-content> <ion-card> <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="searchRestaurants()"></ion-searchbar> <ion-list *ngIf="searchResults.length > 0"> <ion-item *ngFor="let restaurant of searchResults"> <ion-thumbnail slot="start"> <ion-img alt="restaurant-image" class="restaurant-image" id="image-background" [src]="restaurant.image"></ion-img> </ion-thumbnail> <ion-grid> <ion-label> <ion-row> <ion-col class="col-header"> <ion-text color="primary"> <h1>{{ restaurant.name }}</h1> </ion-text> </ion-col> </ion-row> <ion-row> <ion-col class="col-header"> <p><ion-icon name="fast-food-outline"></ion-icon>{{ restaurant.dish }}</p> </ion-col> </ion-row> <ion-row> <ion-col> <ion-text color="medium"> <sub><ion-icon name="star"></ion-icon>{{ restaurant.rating }}</sub></ion-text> </ion-col> <ion-col > <ion-text color="medium"><sub><ion-icon name="pricetag"></ion-icon> {{ restaurant.price | currency :'ZAR':'symbol' }}</sub></ion-text> </ion-col> <ion-col > <ion-text color="medium"> <sub><ion-icon name="car"></ion-icon>{{ restaurant.distance }}</sub></ion-text> </ion-col> </ion-row> <ion-row> <ion-col> <ion-button style="width: 100%" (click)="addToCart(restaurant);">Add To Cart</ion-button> </ion-col> </ion-row> </ion-label> </ion-grid> </ion-item> </ion-list> </ion-card> </ion-content>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter