I am trying to make a chat app, every time someone submits a message, it should get displayed but that is simply not happening.
my HTML code is
<ion-header>
<ion-navbar>
<ion-title>schat</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-list>
<ion-item *ngFor="let chat of chats" no-lines>
<div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
<span class="chat-date">{{chat.sendDate | date:'short'}}</span>
<span class="chat-content-center">{{chat.message}}</span>
</div>
<ng-template #message>
<div class="chat-message" text-right *ngIf="chat.user === username">
<div class="right-bubble">
<span class="msg-name">Me</span>
<span class="msg-date">{{chat.sendDate | date:'short'}}</span>
<p text-wrap>{{chat.message}}</p>
</div>
</div>
<div class="chat-message" text-left *ngIf="chat.user !== username">
<div class="left-bubble">
<span class="msg-name">{{chat.user}}</span>
<span class="msg-date">{{chat.sendDate | date:'short'}}</span>
<p text-wrap>{{chat.message}}</p>
</div>
</div>
</ng-template>
</ion-item>
</ion-list>
<ion-footer>
<ion-grid>
<ion-row>
<ion-col col-10>
<ion-input type="text" placeholder="Type a message" [(ngModel)]="data.message" name="message"></ion-input>
</ion-col>
<ion-col col-2 (click)="sendMessage()">
<ion-icon name="paper-plane"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
My typescript code is:
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Content } from 'ionic-angular';
import * as firebase from 'firebase';
/**
* Generated class for the SchatPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-schat',
templateUrl: 'schat.html',
})
export class SchatPage {
@ViewChild(Content) content: Content;
fire=firebase.database();
data = { message:'', username:'', type:''};
chats=[];
userId:string;
key:string;
offStatus:boolean=false;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.userId = firebase.auth().currentUser.uid;
this.data.type='message';
this.data.username=this.userId;
this.fire.ref('/users/' + this.userId).once('value', resp=>{
let details=resp.val();
let schoolid=details.schoolid;
this.key = this.fire.ref('/chats/').push().key;
this.fire.ref('/chats/' + this.key).set({
studentid:this.userId,
chatended:false,
chatstarted:false,
startime:new Date().toLocaleString(),
chatid:this.key,
schoolid:schoolid
});
});
this.fire.ref('/chats/'+this.key+'/messages').on('value', resp=>{
let detail=resp.val();
console.log(detail);
this.chats=[];
this.chats=snapshotToArray(resp);
setTimeout(() => {
if(this.offStatus === false) {
this.content.scrollToBottom(300);
}
}, 1000);
});
}
sendMessage() {
this.fire.ref('/chats/'+this.key+'/messsages').push().set({
type:this.data.type,
user:this.userId,
message:this.data.message,
sendDate:new Date().toLocaleString(),
});
this.data.message = '';
}
ionViewDidLoad() {
console.log('ionViewDidLoad SchatPage');
}
}
export const snapshotToArray = snapshot => {
let returnArr = [];
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
};