andrewjbateman / ionic-angular-notes Goto Github PK

View Code? Open in Web Editor NEW

:clipboard: App to show a list of items, each with a clickable link to a detailed page. To be developed into an Android app.

License: MIT License

JavaScript 6.86% TypeScript 65.52% HTML 9.47% Java 6.53% SCSS 11.63%

ionic-angular-notes's Introduction

⚡ 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

📚 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;
    });
}