Preview:
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HomePage } from '../home/home.page';

interface Restaurant {
  name: string;
  dish: string;
  rating: number;
  distance: string;
  price: number;
  image: string;
  topDish: string;
}

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
  providers:[HomePage]
})
export class SearchPage implements OnInit {
  searchTerm!: '';
  searchResults: Restaurant[] = [];

  ngOnInit() {
  }

  constructor( private homePage: HomePage) { }
  // Filters the restaurant list based on the user's search term for name, dish, rating, and distance.
  searchRestaurants() {
    if (this.searchTerm.length > 0) {
      this.searchResults = this.homePage.restaurantList.filter((restaurant) =>
        restaurant.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
        restaurant.dish.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
        restaurant.topDish.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
        (restaurant.rating >= parseInt(this.searchTerm) && restaurant.rating < parseInt(this.searchTerm) + 1)

      )
    } else {
      this.searchResults = [];
    };
  };


  addToCart(restaurant:any){
    this.homePage.addToCart(restaurant);
  }

}
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