Ionic 3 - Angular 5 and Firebase - Problem in store data

Question

I'm trying to make a simple login App in Ionic with Firebase.

I have installed all dependency, and set my login and logout functions... but when I try to create a "profile data" nothing happens in firebase... this is my code:

Profilo.ts

    import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,  } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-profilo',
  templateUrl: 'profilo.html',
})
export class ProfiloPage {

  profilo = {} as Profilo;

  constructor(private afauth : AngularFireAuth,
    private afDatabase: AngularFireDatabase,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
  }
  getCurrentUser() {
    this.afauth.authState.subscribe(data => {
      console.log('A informacao de data ' + data.uid);
      return data.uid;
    });
  }
  createProfilo() {
      this.afauth.authState.take(1).subscribe(auth => {
      this.afDatabase.object(`profilo/${auth.uid}`).set(this.profilo)
        .then(() => this.navCtrl.setRoot('AccountPage'));
    })

  }

}

Profilo.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title>Profilo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input ([ngModel])="profilo.username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Nome</ion-label>
    <ion-input ([ngModel])="profilo.nome"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Cognome</ion-label>
    <ion-input ([ngModel])="profilo.cognome"></ion-input>
  </ion-item>
  <button ion-button color="primary"  (click)="createProfilo()"> Create Profile</button>

</ion-content>

When I call the function "create Profile", it should write the data in Firebase, but nothings happens.... what did I do wrong?

This is also my package.json

dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.12.0",
    "@ionic-native/splash-screen": "~4.12.0",
    "@ionic-native/status-bar": "~4.12.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.0.2",
    "firebase": "^5.5.2",
    "ionic-angular": "3.9.2",
    "ionic2-super-tabs": "^4.3.1",
    "ionicons": "3.0.0",
    "ngx-pipes": "^2.3.5",
    "promise-polyfill": "^8.1.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },

Answer 1

your use of ngModel is incorrect

<ion-input ([ngModel])="profilo.nome"></ion-input>

should be [()] NOT ([])

<ion-input [(ngModel)]="profilo.nome"></ion-input>

See working example here: https://stackblitz.com/edit/ionic-angularfire-auth-profile