Try to make a modal with angularfire2


#1

Hi there,

I make a “recipe book” app triggering recipes and ingredient from Firebase.
I set two pages :

  • page 1 a list of recipes

  • page 2 a list of ingredients

I try to make a modal on my page 1 that would be launched by a button (it’s a sliding list with left and right buttons). The modal should contain a checkbox list with all the ingredients available and get checked all the ingredients already selected (if in firebase under the recipe key).
My firebase database looks like this :


My page1.ts :

import { Component } from ‘@angular/core’;
import {AngularFire, FirebaseListObservable} from ‘angularfire2’;
import { NavController, AlertController, ModalController, NavParams,ViewController } from ‘ionic-angular’;
import {Modal} from ‘./modal’;
@Component({
selector: ‘page-page1’,
templateUrl: ‘page1.html’

})

export class Page1 {

recettes: FirebaseListObservable;
ingredients: FirebaseListObservable;
recette_ingredients: FirebaseListObservable;
constructor(public viewCtrl: ViewController, public navCtrl: NavController, public alertCtrl: AlertController, angFire: AngularFire, public modalCtrl: ModalController, params: NavParams) {
this.recettes = angFire.database.list(’/recettes/’);
this.ingredients = angFire.database.list(’/ingredients/’);
this.recette_ingredients = angFire.database.list(’/recettes/’);
}

addRecette():void{
let prompt = this.alertCtrl.create({
title: ‘Nom de la Recette et Ingredients’,
message: ‘Entrez le nom de la recette et les ingredients’,
inputs: [
{
name: ‘nom’,
placeholder: “Nom de la recette”,
type:‘text’
},
{
name: ‘Ingredients’,
placeholder: “Liste d’ingrédients”,
type:‘Array’
},
{
name: ‘Quantite’,
placeholder: “Quantité”,
type:‘number’
},
{
name: ‘UniteIngredients’,
placeholder: “Unite Ingredients”,
type:‘text’
}
],
buttons: [
{
text: “Cancel”,
handler: data =>{
console.log(“cancel clicked”);
}
},
{
text: “Save Recette”,
handler: data => {
this.recettes.push({
nom: data.nom

      })
     this.ingredients.push({
      nom: data.Ingredients,
      unite : data.UniteIngredients
    })
    this.recette_ingredients.push({
    ingredients: data.Ingredients
    })
   }
}

]
})

prompt.present();
}
OpenModal(recette):void{
let modal = this.modalCtrl.create(Modal);
modal.onDidDismiss(data => {
console.log(recette);
});
modal.present();
}

deleteRecette(RecetteID):void{
let prompt = this.alertCtrl.create({
title: ‘Supprimer la Recette’,
buttons: [
{
text: “Cancel”,
handler: data =>{
console.log(“cancel clicked”);
}
},
{
text: “Supprimez la Recette”,
handler: data => {
this.recettes.remove(RecetteID);
}
}
]
})

prompt.present();
}
}
My page1.html






<button ion-button icon-only (click)=“addRecette()”>



Page One

Liste de Recette

Nom: {{recette.nom}}

Ingredients: {{recette.ingredients}}

<ion-item-options side="right">
  <button ion-button color="secondary" (click)="editRecette(recette)">
  <ion-icon name="md-create">Nom </ion-icon>
  </button>
      <button ion-button color="purple" (click)="OpenModal(recette)">
  <ion-icon name="md-create">Editer </ion-icon>
  </button>
</ion-item-options>
<ion-item-options side="left">
  <button ion-button color="danger" (click)="deleteRecette(recette.$key)">
  <ion-icon name="md-trash">Delete </ion-icon>
  </button>
</ion-item-options>
Toggle Menu

I get blank stucked modal page when I try

Inspecting gives :
_ModalCmp ionViewPreLoad error: No component factory found for Modal
_ViewController._lifecycle @ view-controller.js:471

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
plugin.js:33Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ plugin.js:33
plugin.js:33Native: tried calling Splashscreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ plugin.js:33
view-controller.js:471ModalCmp ionViewPreLoad error: No component factory found for Modal
ViewController._lifecycle @ view-controller.js:471

I’m a newbie so please slooooowly explain !:grin:
Thanks a lot !
P.S. : My package.json

“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@ionic/storage": “1.1.7”,
“angularfire2”: “^2.0.0-beta.7”,
“firebase”: “^3.6.5”,
“ionic-angular”: “2.0.0-rc.5”,
“ionic-native”: “2.2.11”,
“ionicons”: “3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“sw-toolbox”: “3.4.0”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ionic/app-scripts": “1.0.0”,
“typescript”: “2.0.9”
},
“cordovaPlugins”: [
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [],
“description”: “recette-ingredient: An Ionic project”
}