Simple code for add favorites items to list

Ionic Framework ionic-v3
1

Hi , l am try to build a simple app ionic 3 with fire database . And my code is working fine pushing data without any problem , but l want add feature code for add favorites items to list . searched on internet but l dont found the result for what l am looking for . l thinking about Native Storage if it work with what l want or not . if any one have any idea or even simple code please help me . thanks

2

Depends do you have a user system if so its very easy to add a feature like that. :slight_smile:

In Theory:

Lets asume you use Firebase like you stated.
You have your logged in user. Looks like this in the Backend NOTE I used Images wich i found on the web…:

grafik

Lets take that user and add a child “favourites”

grafik

Imagen default is favourites here you can add alll your favourites wich that user chose.

When coding it its not that big of a deal unless you want to add more features then you should start to work with providers to stay organized. I can provide you some example codes for that. (If that is even what you wanted what I wrote above :grin:)

3

@cherry thank you very much for replied . i upload snapshot for my app to show you what l need.

Capture
Capture310×547 10.9 KB

l edited this image and added stars to show what l want . when user click on star it is already recording in local storage and the item he is selected transfer to favorite page . l added to you my

home.ts

to take look out and l think in that cause we need only home.ts because l retrieving data there .

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { AngularFireAuth} from ‘angularfire2/auth’;
import { LoginPage } from ‘…/login/login’;
import { AngularFireDatabase,AngularFireList } from ‘angularfire2/database’;
import { AddPostPage } from ‘…/add-post/add-post’;
import { Observable } from ‘rxjs’;
import { NativeStorage } from ‘@ionic-native/native-storage’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

persons: Observable;

constructor(public navCtrl: NavController,public fire : AngularFireAuth,public navParams: NavParams,
db: AngularFireDatabase,public nativeStorage: NativeStorage) {

  this.persons = db.list('people').valueChanges();


const unsubscribe = fire.auth.onAuthStateChanged(user => {
  if (!user) {
    navCtrl.setRoot( LoginPage );
    unsubscribe();
  }
});

}

logout(){

this.fire.auth.signOut();

}
postsPage(){
this.navCtrl.setRoot(AddPostPage)

}

}

4

For this, first of all, you’d need the icon. Then it’s just CSS, if it’s clicked fill the inside and do what you want in the code. And then if it’s clicked again you have to empty what you filled and again do whatever you want. You can use normal ionic buttons and something like https://css-tricks.com/almanac/properties/f/fill/

You can try with the default buttons Ionic offers and then just replace their icon with your own, or do it since the beggining if you already have one

1 Like
5

thank you , all those things l know it . but the problem is with code ! , l dont know how to do code for add favorites items to list.

6

your question is vague? the code is not that informative?

"l want add feature code for add favorites items to list"

  • does this mean create a new list of favorites?
  • mark a specific item as a favorite?
  • write a list of favorites to a specific user?
  • are the list items public or private?

please provide more information so the community can help

3 Likes
7

@aaronksaunders thank you for replying , yes this is what l mean for .

  1. create a new list of favorites item . when the user click on any item star , the items goes to favorites list items page automatic .