Clicking on a button to transfer items between pages (Ionic 2 + Angular 2)

Question

Clicking on a button to transfer items between pages (Ionic 2 + Angular 2)

I'm in the process of creating a recipe application and one feature I'd like to include is a shopping list page. On this page, users can click an "Add to Shopping List" button which will transfer the ingredients listed in a <ul> onto another area on the page. Ideally, these ingredients would be removable and able to be marked as complete. Essentially, it's like a virtual shopping cart without any prices.

The ingredients are currently being fetched from an API using a HTTP GET request and displayed as follows:

<ul>
    <li *ngFor="let item of api?.ingredientLines">{{item}}</li>
</ul>

If anyone has an example or guidance to provide on how to achieve this functionality, I would greatly appreciate it.

angular typescript ionic-framework ionic2

Answer 1

Answer №1

To achieve this, one approach is to create and manage a data structure that can be passed as a parameter to the next page, stored in local storage, submitted to a database, and retrieved when needed.

Any changes made to this structure can be done after clicking on an item using a (click)='myFunc()' type of code snippet.

For example:

<ul *ngFor="let item of api?.ingredientLines">
    <li (click)='myFunc()'>{{item}}</li>
</ul>

In your myFunc() function, you have the flexibility to manipulate the data structure. This could involve adding or maintaining a property such as addedToCart=true.

It's a straightforward process. If you need more detailed assistance, feel free to ask!

Answer 2

To achieve this, one approach is to create and manage a data structure that can be passed as a parameter to the next page, stored in local storage, submitted to a database, and retrieved when needed.

Any changes made to this structure can be done after clicking on an item using a (click)='myFunc()' type of code snippet.

For example:

<ul *ngFor="let item of api?.ingredientLines">
    <li (click)='myFunc()'>{{item}}</li>
</ul>

In your myFunc() function, you have the flexibility to manipulate the data structure. This could involve adding or maintaining a property such as addedToCart=true.

It's a straightforward process. If you need more detailed assistance, feel free to ask!

Clicking on a button to transfer items between pages (Ionic 2 + Angular 2)

Answer №1

Similar questions

A More Straightforward Approach to Unsubscribing from Observables in Angular 7

Is it possible to have Angular and Node.JS Express running on the same port?

How can input be fixed in place within a list inside an Ionic framework popover?

The static side of the class `typeof _Readable` is erroneously extending the static side of the base class `typeof Readable`

Creating a canvas that adjusts proportionally to different screen sizes

Guide to displaying an input box depending on the selection made in a Mat-Select component

Async function causing Next JS router to not update page

Using arrow functions in Typescript e6 allows for the utilization of Array.groupBy

Using the tensorflow library with vite

What is the best way to retrieve the value of the selected mat-option?

Tips for securely passing props based on conditions to a functional component in React

Does combineLatest detach this from an angular service function?

Pressing Enter in a Material-UI Dialog does not trigger form submission

Issue with Spring Boot project not updating data from database

Selected Angular Radio Button

I'm attempting to retrieve an image from the database to display in the modal, but unfortunately the image isn't appearing as expected within the modal

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

Passing data from getServerSideProps to an external component in Next.js using typescript

What are the steps for adding an audio file to Firebase Storage?

How to activate form autofill in an Angular app