How to use <ion-item-sliding> with dynamic data

Ionic Framework ionic-v3
1

Hi,
Need to list API data with *ngFor directive and need to implement to add a like/dislike button while sliding and need to add the specific list to favorite page .
My HTML code:

<ion-list >
	<ion-item-sliding *ngFor="let avatar of avatar; let i = index">
		<ion-item (click)="OpenArticle(avatar)">
			<h2>Lorem Ipsum</h2>
			<p text-wrap>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
			<img src={{avatar.img}} item-right>
		</ion-item>
		<ion-item-options side="right">
			<button ion-button color="danger">
				<ion-icon name="md-share"></ion-icon>
			</button>
			<button ion-button color="primary" (click)="AddToFavour(i)">
				<ion-icon name="md-star" [class.favourite]="favourite"></ion-icon>
			</button>
		</ion-item-options>
	</ion-item-sliding>
</ion-list>

My ts code:
export class EditionPage {
avatar: Array;
favourite = true;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.Article();
}
Article(){
this.avatar = [
{img : “…/…/assets/images/images.jpg”},
{img : “…/…/assets/images/images1.jpg”},
{img : “…/…/assets/images/images2.jpg”}
]
}
OpenArticle(){
this.navCtrl.push(‘ArticlePage’);
}
AddToFavour(){
this.favourite = !this.favourite;///adding the item to favorite needs to be done here.
}
}

Any suggestion is appreciable.
Thanks,

2
  • The following code won’t work as-is, but hopefully there are a couple of ideas here to point you in the right direction.
  • You’ll definitely want to store your favourites in a database or at least in localStorage so that the values are not over-written by the constructor on page load.
  • You’ll probably want to store article content in a database, or read it in an RSS feed or load JSON data from an external file.
  <ion-list >
    <!-- use plural form for the array name. not sure you need the index -->
    <ion-item-sliding *ngFor="let article of articles; let i = index">
      <ion-item (click)="OpenArticle(article)"><!-- each instance of article already knows its index -->
        <h2>Lorem Ipsum</h2>
        <p text-wrap>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <img src={{article.img}} item-right>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger">
          <ion-icon name="md-share"></ion-icon>
        </button>
        <!-- just pass the avatar here. the index is just '0', '1', '2'... -->
        <button ion-button color="primary" (click)="AddToFavour(article)">
          <ion-icon name="md-star" [class.favourite]="favourite"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

TypeScript:

  export class EditionPage {
    articles: Array;
    favourites: Array;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
      // you can define variables directly in your constructor
      this.articles = [
        {img: “…/…/assets/images/images.jpg”, title: "title 1", content: "first article content", author: "John Doe", favorite: false},
        {img: “…/…/assets/images/images1.jpg”, title: "title 2", content: "second article content", author: "Jane Doe", favorite: false},
        {img: “…/…/assets/images/images2.jpg”, title: "title 3", content: "third article content", author: "akhilsanker94", favorite: false}
      ];
    }

    OpenArticle(article){
      this.navCtrl.push(‘ArticlePage’, { navParams: article });  
      // read navParams in the constructor of your ArticlePage
      // If you navigate away from this page, whatever favorites you've stored will be over-written when you come back
    }

    AddToFavour(article){
      article.favorite = true;
      this.favourites.push(article); // you probably want to store these in a database or at least LocalStorage
    }
  }
3

Hi @soundboard6,
Thanks for the reply.
The issues is that when I click favorite button a specific looped article,remaining all the articles is also getting selected. The favorite button is not get selected according to each artivle instances.

Thanks,

4

tnx for your comment, currently I don’t know how to make favorite/unfavorite article, I have JSON data coming from the server,
when click on favorite must store to SQLite database
I’m following this
https://devdactic.com/ionic-sqlite-queries-database/
it’s working but I need to change click button star either marked/unmarked according to database
but I don’t have any idea

you have any solution about this ???

5

@akhilsanker94,

In your original code, you are setting favourite to true for the entire EditionPage class.

 export class EditionPage {
  avatar: Array;
  favourite = true;
 }

…and then your AddToFavour() method toggles the value for the whole class.

this.favourite = !this.favourite

My suggestion was to set favourite as an attribute of each article, individually:

  {
   img: “…/…/assets/images/images.jpg”,
   title: "title 1",
   content: "first article content",
   author: "John Doe",
   favorite: false
  },

…and then pass the selected article as an argument to the AddToFavour(article) method, so it knows which one to change.

Even so, you still need to store these values somewhere or they will be over-written when you reload the page.

6

@hertanet,

It looks to me like you need to write a SQLite query that will insert an extra column in your table to track whether a given article is a favorite or not. Once your table has the right structure, with all the appropriate data types, you can write as many functions as you need to CRUD (in this case Update) your data. It might be updateArticle(attrs), where you pass in any value, or a simpler toggleFavorite(article) function, similar to the way @akhilsanker94 is doing it.

7

hi @soundboard6,
Thanks for the reply. I will update you when I finish.

Thanks,