ngSwitch in Ionic2 not working

Question

I am trying to switch headers between different states of my app's connection status. But after changing the bound variable "serverConnectionStatus" (in the code below) for the first time, I get an empty header instead of a different header.

I have tried putting the ngSwitch in the ion-header itself, and in the ion-navbar.

But no success so far....

I am using nightly build of angular 2 + ionic 2.

Any clue what's done wrong?

<div [ngSwitch]="serverConnectionStatus">
    <ion-header *ngSwitchCase="'connecting'">
        <ion-navbar>
            <ion-title>
                <span style="color: #00b900 !important;">Connecting Server...</span>
            </ion-title>
        </ion-navbar>
    </ion-header>
    <ion-header *ngSwitchCase="'error'">
        <ion-navbar>
            <ion-title>
                <span style="color: #ff1608 !important;">No Posts: {{serverConnectionError}}</span>
            </ion-title>
        </ion-navbar>
    </ion-header>
    <ion-header *ngSwitchCase="'connecting'">
        <ion-navbar>
            <ion-title>
                <span style="color: #00b900 !important;">Connecting Server...</span>
            </ion-title>
        </ion-navbar>
    </ion-header>
</div>

Adding my full component source code below:

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Config } from '../../providers/config/config';
import { PostService } from '../../providers/http/post-service'
import { ToastController } from 'ionic-angular';
import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';

@Component( {
    templateUrl: 'build/pages/home/home.html',
    directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
    } )

export class HomePage
{
    private posts: any;
    public serverConnectionStatus: string = "connecting";
    public serverConnectionError: string = "";

    constructor( private navCtrl: NavController, private toastController : ToastController, private config: Config, private PostService: PostService )
    {
        this.getLocalPosts();
    }

    private addRandomPosts()
    {

    }

    private getLocalPosts()
    {
        this.PostService.getPosts()
            .subscribe(
                postsJson =>
                {
                    this.posts = postsJson;
                    this.serverConnectionStatus="connected";
                },
                error =>
                {
                    console.error( error );
                    //this.serverConnectionError="1234"; // error.statusText;
                    //this.serverConnectionStatus="error";
                } );
    }
}

Home.html

<div [ngSwitch]="serverConnectionStatus">
    <ion-header *ngSwitchCase="'connecting'">
        <ion-navbar>
            <ion-title>
                <span style="color: #00b900 !important;">Connecting Server...</span>
            </ion-title>
        </ion-navbar>
    </ion-header>
    <ion-header *ngSwitchCase="'error'">
        <ion-navbar>
            <ion-title>
                <span style="color: #ff1608 !important;">No Posts: {{serverConnectionError}}</span>
            </ion-title>
        </ion-navbar>
    </ion-header>
    <ion-header *ngSwitchCase="'connected'">
        <ion-navbar>
            <ion-title>
                <span style="color: #00b900 !important;">Connected</span>
            </ion-title>
        </ion-navbar>
    </ion-header>
</div>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <ion-avatar item-left>
        <img src="{{post.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{post.name.first}} {{post.name.last}}</h2>
      <p>{{post.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

Nope. removing the quotes only causes the header not to be shown at all... — rubmz
Try to use this <template [ngSwitchCase]="'Eenie'"><span>Eenie</span></template>. I mean wrap ion-header tags by template tag — Lyubimov Roman
I don't thing <template> is allowed in a template.html file ... Anyway it does not work — rubmz
Why it can be not allowed in template file? angular.io/docs/ts/latest/api/common/index/… <template> tag is alternative syntax. But I guess yeah, it wouldn't help. Mybe you should just put switch into <ion-title>? — Lyubimov Roman

sebaferreras sebaferreras · Accepted Answer · 2016-08-18T16:03:01

Please take a look at this plunker. Instead of defining three different ion-header, why don't you use only one (like is recommended) and bind the things that could change in your typescript code like this:

    <ion-header>
        <ion-navbar>
            <ion-title>
                <span [style.color]="color">{{ title}}</span>
            </ion-title>
        </ion-navbar>
    </ion-header>

And then

    private getLocalPosts()
    {
        this.PostService.getPosts()
            .subscribe(
                postsJson =>
                {
                    this.posts = postsJson;
                    this.serverConnectionStatus="connected";

                    // Added code
                    this.color = ...;
                    this.title = ...;
                },
                error =>
                {
                    console.error( error );
                    //this.serverConnectionError="1234"; // error.statusText;
                    //this.serverConnectionStatus="error";

                    // Added code
                    this.color = ...;
                    this.title = ...;
                } );
    }

ngSwitch in Ionic2 not working

1 Answers