⚡ Ionic Angular Notes

• App to show recipes as a list and in a detailed view, using the Ionic framework.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular Notes
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• The Home page is a list of recipes. Click on one and it shows the detailed recipe page using the recipe id.
• The back button routes the user back to the home screen.
• The delete button deletes the recipe with an alert appearing
• Capacitor installed so app can be run on android.

📷 Screenshots

📶 Technologies

• Ionic v6
• Ionic/angular v6
• Angular framework v13
• Capacitor framework v3
• Ionic DevApp, to allow app to run on an iOS or Android device.

💾 Setup

• Run npm i to install dependencies
• To start the server on localhost://8100 type: 'ionic serve'
• The Ionic DevApp was installed on an Android device from the Google Play app store.

💻 Code Examples

• functions to search for info and retrieve more detailed info.

getAllRecipes() {
  return [...this.recipes];
}
// return a single recipe for an id
getRecipe(recipeId: string) {
  return {
    ...this.recipes.find(recipe => {
      return recipe.id === recipeId;
    })
  };
}

// delete a recipe using the filter function and recipe id
  deleteRecipe(recipeId: string) {
    this.recipes = this.recipes.filter(recipe => {
      return recipe.id !== recipeId;
    });
}

🆒 Features

• Ionic Capacitor used to build the web app for Android.

📋 Status & To-do list

• Status: Working.
• To-do: change data in recipes.services.ts. Add functionality. run in Android simulator.

👏 Inspiration

• Acadamind Udemy Course: Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]