I am a beginner in Ionic-angular development and I am currently trying to create a function in my home.ts file and call it in my home.html file to perform a basic 'Create' operation on my FirebaseDB. Here is an excerpt from my home.html file:
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addCourse()">
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
This section showcases my home.ts file:
home.ts
import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from '../../../node_modules/rxjs';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
songsList: AngularFireList<any>;
songs: Observable<any>;
constructor(public navCtrl: NavController, public afDB: AngularFireDatabase, public alertCtrl: AlertController) {
this.songsList = this.afDB.list('/songs');
this.songs = this.songsList.valueChanges();
function addCourse(){
let prompt = this.alertCtrl.create({
title: 'Course Name',
message: "Enter the Course Code",
inputs: [
{
name: 'title',
placeholder: 'Title'
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancelled');
}
},
{
text: 'Save',
handler: data => {
const newSongRef = this.songs.push({});
newSongRef.set({
id: newSongRef.key,
title: data.title
});
}
}
]
});
prompt.present();
}
}
}
Removing the declaration 'function' from function addCourse(){...} results in an error, but when viewing the website, I encounter the following message:
_co.addCourse() is not a function. (In '_co.addCourse()','_co.addCourse() is undefined)
Initially, I believed that moving the function outside of the constructor may resolve the issue. However, doing so raises questions about accessing the database or the Alert Controller.
Your assistance is greatly appreciated!