<ion-segment> pre-populate data

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:

        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        <ion-title>Messages Board</ion-title>
<ion-content #content padding class="MessagePage">
    <ion-segment [(ngModel)]="messageslist" color="primary">
    <ion-segment-button value="messageboard">
      Message Board
    <ion-segment-button value="privatemessages">
      My Messages
  <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">
                <div class="sender-info">
                    <span class="subject"><i>{{ message.messagetitle }}</i></span>
                    <span class="from">{{ message.fullname }}</span>
                <span class="time">{{ message.senttime | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
          <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">
                <div class="sender-info">
                    <span class="subject"><i>{{ item.messagetitle }}</i></span>
                    <span class="from">Sent By: {{ item.sentby }}</span>
                <span class="time">{{ item.senttime | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
          <ion-fab *ngIf="role=='admin' || role=='teacher'" clear small right bottom>
        <button ion-fab (click)="SendMessage()">
            <ion-icon name="md-paper-plane"></ion-icon>

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.
  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";
    public navCtrl: NavController,
    public userData: UserData,
    public navParams: NavParams,
    public alertController: AlertController,
    public af: AngularFire
    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');

  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

 public ionViewDidEnter(){


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