Okay, I’m going to try and answer a few of these questions for you. Please don’t respond to already solved posts, keep it in this one. Easier to maintain and for other people to see whether a discussion was already solved or not.
Point 1:
Most straight forward solution is to just slice (with the slice pipe) your data in the view according to a variable that you’ve set in your class. Something like this:
<ion-item *ngFor='let item of items | slice:start_at_item:end_at_item'>
In your class simply set start_at_item at your desired start item (let’s say 0) and and your end_at_item at your desired limit (let’s say 4). Now only five items will be shown in your view. On your infinite scroll simply change end_at_item into a higher number every time you hit it.
Official Angular documentation about the slice pipe:
https://angular.io/api/common/SlicePipe
Point 2:
This one I wouldn’t solve by putting the entire item in the navparams, but by using a list of data set in the provider which you can reach from your detailpage.
Let’s say I have a list:
- item 1
- item 2
- item 3
When I click item one, then I’m on the detailpage. Now I want to navigate to item 2 without going back to the listpage.
instead of putting the entire item { item: item } into the navParams, only push the items index and keep the items in a provider instead of in the page. Now you can do this in your detailpage: this.detail_item = this.myDataProvider.items[index]
. If you want to load the next item into your detailpage, simply add 1 to the index, or in case you want to ga back subtact 1. Make sure you don’t go out of the list’s reach (i.e. this.myDataProvider.items[-1] or something like that.
Point 3:
Use Ionic’s storage provider which you can find here.
Use the items unique ID als key in your storage. Something like this when I’ve opened an items detailpage:
setInStorage(key: string, value: boolean) {
const identifier = 'seen_' + key;
this.storage.set(identifier, value);
}
Now next time when you load your list, try to get the items from your storage:
getFromStorage(key) {
const identifier = 'seen_' + key;
this.storage.get(identifier).then(
(result) => {
if (!!result) ......
}
)
}
Point 4:
You’ve figured this one out yourself :-).
Please note I have wrote this code from the top of my head, and haven’t tested it. It’s just for you to get an understanding on how to achieve what you want.