I have created 2 segments on my page using .Each segment displays the data once i click on . Data gets populated with help of the code present inside my constructor.
By default when i reach on this page, it is completely blank and data only gets loaded once i click on the segment button. Is there any way to populate the data of default segment as soon as i reach on this page?
Could you please show us your template and typescript code? Little bit hard to tell without it. If I have to guess I think you might haven’t set any default value to your segments to bind to.
Hi lukkschoen…here you go…
HTML Code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Messages Board</ion-title>
</ion-navbar>
</ion-header>
<ion-content #content padding class="MessagePage">
<ion-segment [(ngModel)]="messageslist" color="primary">
<ion-segment-button value="messageboard">
Message Board
</ion-segment-button>
<ion-segment-button value="privatemessages">
My Messages
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="messageslist">
<ion-list *ngSwitchCase="'messageboard'">
<div text-center class="no-data" *ngIf="(messages | async)?.length==0">You have not added any message yet. Please click on "+" icon to start.</div>
<ion-item class="unread" *ngFor="let message of messages | async">
<header>
<div class="sender-info">
<span class="subject"><i>{{ message.messagetitle }}</i></span>
<span class="from">{{ message.fullname }}</span>
</div>
<span class="time">{{ message.senttime | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
</header>
<main>
{{message.description}}
</main>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'privatemessages'">
<div text-center class="no-data" *ngIf="(personalmessages | async)?.length==0">You have not added any message yet. Please click on "+" icon to start.</div>
<ion-item class="unread" *ngFor="let item of personalmessages | async">
<header>
<div class="sender-info">
<span class="subject"><i>{{ item.messagetitle }}</i></span>
<span class="from">Sent By: {{ item.sentby }}</span>
</div>
<span class="time">{{ item.senttime | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
</header>
<main>
{{item.description}}
</main>
</ion-item>
</ion-list>
</div>
<ion-fab *ngIf="role=='admin' || role=='teacher'" clear small right bottom>
<button ion-fab (click)="SendMessage()">
<ion-icon name="md-paper-plane"></ion-icon>
</button>
</ion-fab>
</ion-content>>
TS File:
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import { UserData } from '../../../providers/user-data';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
/*
Generated class for the Messageboard page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-messageboard',
templateUrl: 'messageboard.html',
queries: {
content: new ViewChild('content')
}
})
export class MessageboardPage {
messages: FirebaseListObservable<any[]>;
classid : any;
fullname: any;
messagetitle: any;
description: any;
content: any;
role: any;
userid: any;
personalmessages: FirebaseListObservable<any[]>;
messagelist: string = "messageboard";
constructor(
public navCtrl: NavController,
public userData: UserData,
public navParams: NavParams,
public alertController: AlertController,
public af: AngularFire
){
this.classid=this.navParams.data;
console.log("Class ID==>" +this.classid);
this.messages = this.userData.getAllMessagesByClassID(this.classid);
this.userid = this.userData.uid;
console.log("User ID==>" +this.userid);
this.personalmessages = this.userData.getAllMessagesForUser(this.userid);
console.log("Personal Messages==>" +this.personalmessages);
this.userData.myRole$.subscribe( data => {
this.role = data;
});
}
ionViewDidLoad() {
console.log( " -> " + this.userData.role );
console.log('Hello MessageBoard Page');
this.userData.dismissLoadingController();
}
SendMessage(): void {
let alert = this.alertController.create({
title: 'Enter message details',
inputs :[
{
name: 'messagetitle',
placeholder: 'Enter message title'
},
{
name: 'description',
placeholder: 'Description'
}
],
buttons: [
{
text: "Cancel",
handler: data=> {
console.log("Cancel Clicked")
}},
{
text: "Save",
handler: data=> {
this.messages.push ({
messagetitle: data.messagetitle,
description: data.description,
classid: this.classid,
schoolid: this.userData.schoolid,
senttime: firebase.database['ServerValue']['TIMESTAMP'],
sentby: this.userData.uid
})
}
}
]
});
alert.present();
}
public ionViewDidEnter(){
this.content.scrollToBottom(300);
}
}
Inside your typescript you have this:
messagelist: string = "messageboard";
this should be the same as this:
<div [ngSwitch]="messageslist">
Notice the difference? Missing a letter S on the messagelist declaration.
1 Like
wow…such a silly mistake. Thanks for pointing this out.
Have a great day ahead…
No problem. Sometimes it’s good to have a fresh pair of eyes looking at your code.
1 Like