mntdragon / shopping-list-firebase-ionic-

simple application to add, show, remove the item from the shopping list

This is a starter template for Ionic projects.

How to use this template

This template does not work on its own. The shared files for each starter are found in the ionic2-app-base repo.

To use this template, either create a new ionic project using the ionic node.js utility, or copy the files from this repository into the Starter App Base.

With the Ionic CLI:

Take the name after ionic2-starter-, and that is the name of the template to be used when using the ionic start command below:

$ sudo npm install -g ionic cordova
$ ionic start myBlank blank

Then, to run it, cd into myBlank and run:

$ ionic cordova platform add ios
$ ionic cordova run ios

Substitute ios for android if not on a Mac.

*****Firebase

1. Add Firebases to your web app
2. copy config content
3. Create firebase.credential.ts - paste config there
4. npm install firebase angularfire2 --save
5. import firebase_config, angularfiredatabasemodule and angularfiremodule in app.module.ts

---- Now able to use both angular file and database inside app ----

*****if this error: ERROR Error: Uncaught (in promise): Error: PERMISSION_DENIED: Permission denied Error: PERMISSION_DENIED: Permission denied .... here is the SOLUTION

Allow unauthenticated access to your database

The simplest workaround for the moment (until the tutorial gets updated) is to go into the Database panel in the console for you project, select the Rules tab and replace the contents with these rules: { "rules": { ".read": "auth != null", ".write": "auth != null" } }

---- more optional: https://stackoverflow.com/questions/37403747/firebase-permission-denied

***** Note: navPush = go to another page directly in html item folder for store item list service folder: shoppinglist - to do interaction with the database: edit, push, update, remove

shopping-list-firebase-ionic-'s Issues

Not able to delete a single child in firebase

when i try to delete a single child alll the my child gets deleted in firebase.
i had tried many methods but not getting a solution please help.
here is my ts file and html file

myrequest.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController, ToastController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable } from 'angularfire2/database';
import { AboutusPage } from '../aboutus/aboutus';
import firebase from 'firebase/app';
import { Response } from '../../models/response';
import { BloodbankPage } from '../bloodbank/bloodbank';

@IonicPage()
@component({
selector: 'page-myrequest',
templateUrl: 'myrequest.html',
})
export class MyrequestPage {
public contactList;

responseData: FirebaseListObservable<any[]>
dataList:any;
constructor(public navCtrl: NavController, public navParams: NavParams,private afAuth: AngularFireAuth,
private afDatabase: AngularFireDatabase,private toast: ToastController)
{

}

 ionViewWillLoad()
{
  this.afAuth.authState.subscribe(data => {
    if(data && data.email && data.uid){
    this.responseData = this.afDatabase.list(`response/${data.uid}`);
    this.responseData.forEach(data=>{
      console.log(data);
      this.dataList=data;
    });
    console.log(data);
  }
  else{
      this.toast.create({
      message:'could not find',
      duration:3000
    }).present();
  }
  });

}

ionViewDidLoad() {
}

deleteContact(key: string) {
this.responseData.remove(key);
}
}

myrequest.html

My Request

        <ion-card-header>
           User Details
        </ion-card-header>
        <ion-card-content>
           
           <ion-list no-line >
            
              <ion-item>
                 <p>Name:{{data.name}} </p>
              </ion-item>
              <ion-item>
                 <p>City: {{data.city}} </p>
              </ion-item>
              <ion-item>
                 <p>Date: {{data.date}} </p>
              </ion-item>
              <ion-item>
                 <p>Bloodgroup:{{data.bloodgroup}}</p>
              </ion-item>
              <ion-item>
                 <p>Phone no: {{data.phoneno}}</p>
              </ion-item>
            
           </ion-list>
          
        </ion-card-content>
      
     </ion-card>

 <button ion-button outline center icon-left (click)="editContact(contact)">
  Edit
  </button>
  <button ion-button outline center icon-left (click)="deleteContact()">
  Delete
  </button>
 
</div>